how to make left logo image and center website name in navba

Topic: how to make left logo image and center website name in navbar

Rawan Alaufi asked 7 years ago

I have this nav bar i want to make it like this(logo website name username)I tried to make website name in center but it does not work

<nav class="navbar navbar-default\\\" style=\\\"font-weight: bold; background-color: white; margin-bottom: 0;border-color: transparent;\\\" role=\\\"navigation\\\"><!-- Brand and toggle get grouped for better mobile display --><div class=\\\"navbar-header\\\"><button type=\\\"button\\\" class=\\\"navbar-toggle\\\" data-toggle=\\\"collapse\\\" data-target=\\\"#myNavbar\\\"><span class=\\\"icon-bar\\\"></span><span class=\\\"icon-bar\\\"></span><span class=\\\"icon-bar\\\"></span></button><h3 id=\\\"logo\\\" style=\\\"margin-top: 0;color:#183F66\\\"><img style=\\\" margin:0 !important;;\\\" src=\\\"~/images/logo3_resz.png\\\" alt=\\\"logo\\\" /> Smart archiVe for IT senior project at KAU</h3></div><div class=\\\"collapse navbar-collapse\\\" id=\\\"myNavbar\\\"><ul class=\\\"nav navbar-nav navbar-right\\\" style=\\\"padding-top:10px\\\"><li><a href=\\\"#\\\" style=\\\"color:#183F66\\\"><span class=\\\"glyphicon glyphicon-log-out\\\" style=\\\"color:#183F66\\\"></span> Logout</a></li><li><a href=\\\"#\\\" style=\\\"color:#183F66\\\"><span class=\\\"glyphicon glyphicon-user\\\" style=\\\"color:#183F66\\\"></span> username</a></li></ul></div></nav>

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi there Rawan,

Thanks for reaching out! Navbar uses display: flex; for aligning its content, and so, to distribute content within evenly, you could try to do the same with .navbar-header:

.navbar {
 display: flex;
 justify-content: space-around;
}

I am not sure, if I understand what you want in your navbar, as the three things you mentioned (logo, website name and username) do not include the button necessary for toggling the menu sliding out and back (the insides of navbar-collapse). If you want to have the username displayed at all times, you have to in turn take it out of the navbar-collapse parent element.

With Best Regards,

Kuba

Add comment

johnwalsh1020 answered 5 years ago