Topic: how to make left logo image and center website name in navbar
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>
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No