html - Center brand in navbar with items on each side -


I am trying to focus my brand in which there is a logo in my navbar, I essentially around it Want a focused brand with menu items (e.g., two menu items on the left and two on the right side of the brand).

I have tried many things like this: and it works, but I would prefer a solution without much JavaScript.

I have also tried to do something like this 

  .navbar-header {float: left; Padding: 15px; Text align: center; Width: 100%; } .navbar-brand {float: none;}

But it only focuses on the brand, and does not move it between menu items, so stacking them on top Does.

I have also tried to add the logo to the menu item, and it works on the desktop, it does not look very good on mobile devices because it is a normal menu item and hence drop down menu Is a part of

Here are two examples of what I have tried: and

How can this be done?

I found a solution! That's what I did a long time ago, but I added CSS which will also work on mobile devices.

First of all, I simply add a menu item between my other menu items

It is the same that I have kept the general brand which is the default in the bootstrap navigation but added to make the visible Xs class visible only at lower resolutions

< Pre> & lt; Class = "navbar-brand visible-Xs" href = "#" & gt; & Lt; Img src = "img / logo.png" & gt; & Lt; / A & gt;

Then I have the following CSS to support it. This is to hide the logo only from navigation and instead displays default branding 

  @ media (max-width: 768px) {.navbar-nav .logo {display: none; }} .navbar-nav .logo {opacity: 1; Vertical-row: middle; }

Comments

Post a Comment