Align the logo in the center of the navbar with items placed on either side

Question

Align the logo in the center of the navbar with items placed on either side

Looking for a way to center my brand logo within my navbar with menu items positioned around it? Preferably without the use of javascript? I've tried different methods, including adjusting the Bootstrap navbar styling, but haven't found a perfect solution yet.

I attempted to center the brand by using CSS properties like:

.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}

.navbar-brand {float: none;}

However, this only centers the brand without integrating it between the menu items as desired, instead stacking it on top of them.

I also explored the option of adding the logo directly to a menu item, which worked well on desktops but didn't look good on mobile devices due to its treatment as a regular menu item within the dropdown.

Examples of my attempts can be viewed here: http://www.bootply.com/114800 and http://www.bootply.com/114804.

Any suggestions on how to accomplish this design layout?

html css twitter-bootstrap navigation

Answer 1

Answer №1

Success! I found a workaround that incorporates CSS to ensure functionality on mobile devices as well.

To begin, I inserted a menu item amidst the existing ones on my navigation bar:

<div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="logo"><a href="#"><img src="img/logo.png"></a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Something</a></li>
      </ul>
</div><!--/.nav-collapse -->

Additionally, I retained the default brand logo in the bootstrap navbar while including the visible-xs class to ensure its appearance on smaller screens exclusively:

<a class="navbar-brand visible-xs" href="#"><img src="img/logo.png"></a>

Next, I crafted the following CSS rules to accommodate the changes. These adjustments hide the logo within the navigation bar and showcase the default branding instead:

@media (max-width: 768px) {
    .navbar-nav .logo {
        display:none;
    }
}

.navbar-nav .logo {
    opacity: 1;
    vertical-align: middle;
}

Answer 2

Success! I found a workaround that incorporates CSS to ensure functionality on mobile devices as well.

To begin, I inserted a menu item amidst the existing ones on my navigation bar:

<div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="logo"><a href="#"><img src="img/logo.png"></a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Something</a></li>
      </ul>
</div><!--/.nav-collapse -->

Additionally, I retained the default brand logo in the bootstrap navbar while including the visible-xs class to ensure its appearance on smaller screens exclusively:

<a class="navbar-brand visible-xs" href="#"><img src="img/logo.png"></a>

Next, I crafted the following CSS rules to accommodate the changes. These adjustments hide the logo within the navigation bar and showcase the default branding instead:

@media (max-width: 768px) {
    .navbar-nav .logo {
        display:none;
    }
}

.navbar-nav .logo {
    opacity: 1;
    vertical-align: middle;
}

Answer 3

Answer №2

Below is an illustration of the CSS I employ for organizing 3 sections (with one section centered in the middle). If you opt for floating to achieve this layout, all elements must be floated so they are in relation to each other. I enclose these within a div with the class .blocky.

(UPDATE): I have included additional details to ensure proper centering. Technically, you could eliminate the right section class and just place the left and middle sections one after the other, but I previously used the right class to clear something. Feel free to experiment with it.

<div class="blocky">
     <div class="leftSection">
     </div>
     <div class="middleSection">
     </div>
     <div class="rightSection">
     </div>
</div>

Feel free to reach out if you require further clarification or if I can enhance the clarity of this explanation. By the way, the clears specified in the CSS are intended to prevent any unintended placement within this alignment. Additionally, the padding, margins, and width values can all be adjusted or even removed entirely in some cases.

.blocky
{
  overflow: auto;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  float:none;
}
.leftSection
{
  float: left;
  width: 236px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
  clear: left;
 }

.rightSection
{
  float: right;
  width: 236px;
  margin-bottom:20px;
  margin-top: 5px;
  clear:right;
}

.middleSection
{
  float: left;
  width: 236px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
}

Answer 4

Below is an illustration of the CSS I employ for organizing 3 sections (with one section centered in the middle). If you opt for floating to achieve this layout, all elements must be floated so they are in relation to each other. I enclose these within a div with the class .blocky.

(UPDATE): I have included additional details to ensure proper centering. Technically, you could eliminate the right section class and just place the left and middle sections one after the other, but I previously used the right class to clear something. Feel free to experiment with it.

<div class="blocky">
     <div class="leftSection">
     </div>
     <div class="middleSection">
     </div>
     <div class="rightSection">
     </div>
</div>

Feel free to reach out if you require further clarification or if I can enhance the clarity of this explanation. By the way, the clears specified in the CSS are intended to prevent any unintended placement within this alignment. Additionally, the padding, margins, and width values can all be adjusted or even removed entirely in some cases.

.blocky
{
  overflow: auto;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  float:none;
}
.leftSection
{
  float: left;
  width: 236px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
  clear: left;
 }

.rightSection
{
  float: right;
  width: 236px;
  margin-bottom:20px;
  margin-top: 5px;
  clear:right;
}

.middleSection
{
  float: left;
  width: 236px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
}

Align the logo in the center of the navbar with items placed on either side

Answer №1

Answer №2

Similar questions

Struggling to locate elements with Python selenium

In need of a solution for this peculiar problem with an html table and css. Let's

Icon that can be clicked before

Steps to eliminate the x icon from the text box that appears automatically in Internet Explorer

Incorporating a header include on every page throughout my website

Expand the contents inside a div without affecting the actual div

What is the best way to handle images overflowing a div

Engaging with the CSS content attribute

What could be causing my Jquery fade effect to not function properly?

Turn off hover opacity effect for a specific image

MaterialUI Box reigns supreme in the realm of background images

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

What is the best way to add multiple classes to an HTML element?

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

Ensure that the content remains centered within absolutely positioned DIVs inside the parent container

Is the parameter retrieval method correct or erroneous?

What could be causing this Form to redirect to the incorrect file path?

Provide solely the specified content range

Traverse div elements using jQuery and showcase the text within them

Attempting to toggle the visibility of div elements based on radio button selections