Tips on showcasing triple rows of text in a single navbar <li> item

I am trying to create a navbar that looks like the following design:

+--------------------------------------------+
+ navbar-brand img |      |       |  Link 1  |
+ navbar-brand img | Home | About |  Link 2  |
+ navbar-brand img |      |       |  Link 3  |
+--------------------------------------------+

In addition, the "Home" and "About" links should be slightly bigger than the three links on the right. Currently, I have adjusted the line-heights and heights of .navbar-nav li a to increase the height of the navbar.

This is the HTML code I am currently using: Bootply Demo

<div id="header" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-brand">
                <img src="img/logo.jpg"/>
            </div>

            <button type="button" class="navbar-toggle toggleButton" data-toggle="collapse" data-target="#navbarmenu">
                <i class="fa fa-bars fa-2x"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarmenu">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li>
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Can someone advise me on the best approach to achieve this design? Appreciate the help!

htmlcsstwitter-bootstrap

Answer №1

To ensure the links take up the entire width, use display:block, and include vertical-align:middle to center all elements vertically:

.navbar-nav  {
    display:inline-block;
}

.navbar-nav li {
    display:inline-block;
    vertical-align:middle;
}

.navbar-nav li a {
    display:block;
}

For a live demonstration, check out this fiddle link: http://jsfiddle.net/LyLv2wqr/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate styled components and interpolations using emotion theming?

I've been building a React web application with a dynamic theme feature using the emotion-theming library. This allows users to switch between different environments, each with its own unique theme. To achieve this, I created my own CustomThemeProvide ...

cssreactjstypescriptemotion

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...

htmlcsshtml-listsmultiple-columns

Tips on incorporating character frequency counting in a string with JavaScript

I am working on a simple project involving HTML code. <textarea id="text" placeholder="Type text...."></textarea> <a id="button" class="button"></a> <textarea id="result" disabled></textarea> Additionally, I have a blo ...

javascripthtml

Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the o ...

htmlcssangularjsformstwitter-bootstrap-3

The vertical-rl writing mode fails to function properly when the website is viewed within the Facebook app

I am facing an issue with a vertical button on my website. It works fine in browsers, but when the webpage is shared on Facebook and opened within the Facebook app, the button's alignment gets distorted. How can I resolve this problem? <div class= ...

htmlcss

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

jsx eliminate parent based on dimensions

Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...

htmlreactjsjsx

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

htmlhttppostliferayportlet

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

I am trying to implement a unique feature for a link using a Bootstrap button, where it only works on the second click. On the first click, the appearance of the link should change slightly. To achieve this, I am utilizing the .addClass(newClass), .removeC ...

javascriptjqueryhtmltwitter-bootstrap

Display the iframe website without it being visible to the user

Is there a way to load a separate website, such as a Wikipedia article, in an iframe on a webpage without freezing up the whole page when it becomes visible after clicking a "show" button? And if not, how can we display a loading gif while the iframe is ...

javascriptjqueryhtml

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Looking for help to create a parallax effect on an image when hovered over. Does anyone have any advice or resources? Feeling frustrated at the moment. Here is an example link for reference: http://codecanyon.net/item/jquery-moving-perspective/full_scre ...

javascriptjquerycssimage

Steps for inserting telephone numbers from a database into an <a href="tel:"> tag

<a href="tel:<?php echo $b2b_mec_num; ?>"><button type="button" class="btn" id="CallBtn">&nbsp;CALL</button></a> I am looking to dynamically add phone numbers from a database to the anchor tag provided in the code snippet ...

javascriptphphtml

Display immersive full-screen overlays that encompass the entire vertical space without the need for scrolling

Recently, I ran into a challenge while attempting to create a CSS print style-sheet. The issue arose when I tried to print a full-screen overlay containing scrollable content. Only the content that was currently displayed would show up in the printed ver ...

cssprintingoverlay

Single Page Site - navigation to distinct sections with 'placeholder' pages

As part of a school project, I have been tasked with designing a website. My goal is to create a single-page website, but we are required to link to different pages like contact.html. I also want the page to smoothly scroll to the navigation section when a ...

javascriptjqueryhtmlanchor

Prevent elements from moving when resizing the window

I have designed a header bar for my webpage that includes elements like , and . The layout looks nice until I resize the browser window, causing everything to move and overlap within the header. Applying a fixed width like "width: 1000px" to the header or ...

htmlcssresponsive-design

jQuery iScroll: The scrolling feature does not stop when reaching the end of the content

Recently, I've been utilizing iScroll for horizontal scrolling on a list. At first, everything seems to be working fine, but as I scroll towards the end (right to left), the content reaches its conclusion yet the scrolling continues beyond that. I&apo ...

javascriptjquerycssiscroll

How can I dynamically assign the name tag in an ngFor* loop?

I am currently facing an issue with setting the name tag dynamically using values from a ngFor loop. While I can easily assign a value to the id tag, it seems that the same approach does not work for the name tag. <table class="compactTable"> < ...

htmlangulartypescriptdynamicngfor

Ensure that the div stays anchored to the bottom of the page while maintaining its

Although I know this question has probably been asked and answered before, I couldn't find any useful solutions to my specific problem... I'm attempting to position a chat box div at the bottom of a page without being fixed, while still maintain ...

htmlcss

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

Is there a way to refresh the even and odd count in CSS whenever a specific row is shown? Here's an example setup: header header header even even even odd odd odd Subhead Subhead Subhead even even even How can I ensu ...

htmlcss