Topic: Navbar Positioning of nav-items
Hi guys,
I have a problem with my navigation bar.
I have a navbar with one navbar-brand, 3 nav-items, and 2 nav-flex icons.
What I want my solution to look like:
1. The navbar brand shows a logo
2. The 3 nav items are centered and I want to be able to change the distance between one another (margin)
3. The nav-flex-icons are positioned on the right side of the navbar
To 1.:
I haven't yet tried to insert a logo inside of the navbar-brand.
Shouldn't be a big deal, unless it's not possible?
To 2.:
I suppose I can add the class nav-item to my style.css file and just add a margin-right and margin-left to it.
To 3.:
The nav-flex-icons are positioned to the right automatically.
But here is my problem.
For some reason, I don't understand, they slipped one line down.
Hence the navbar height has increased.
I want them to be in the same line as my brand and the items.
For my project I use one of the Portfolio templates.
I don't really remember, which one I started with...
Here is the snippet of my code for the navbar:
<nav class="navbar navbar-dark unique-color-dark navbar-fixed-top scrolling-navbar">
<!-- Collapse button-->
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#collapseEx">
<i class="fa fa-bars"></i></button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-sm" id="collapseEx">
<!--Navbar Brand-->
PI
<!--Links-->
<ul class="nav navbar-nav flex-center smooth-scroll">
<li class="nav-item">
X
<li class="nav-item">
Y
<li class="nav-item">
Z
<!--Navbar icons-->
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item">
<i class="fa fa-facebook"></i>
<!-- <li class="nav-item">
<i class="fa fa-twitter"></i>
-->
<li class="nav-item">
<i class="fa fa-instagram"></i>
</div>
<!--/.Collapse content-->
</div>
</nav>
Add comment
Welcome back leopoldus11,
at the beginning of improved navbar:
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark unique-color-dark navbar-fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong><!-- or <img src="img-url.jpg" class="img-fluid">-->
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-3">
<a class="nav-link">Features</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav><li> and <ul>, new mdb does not use a .navbar-fixed-top only .fixed-top.
2. Version template does not coincide with the version of MDB. These are our inner package versions templates. Lates template pack: 4.1. Lates MDB: 4.3.
3. If you have version 4.0 templates, you can free upgrade to 4.1. You must enter the Account > Downloads and instantly download the update.
4. MDB 4.3 uses the latest bootstrap who introduced flexbox. Therefore, templates are not so very compatible with MDB 4.3 and need more modification. For example, removal of -xs in class.
If you have more questions, write them and I will answer them with pleasure.
Regards
It's me again.
So, I found out something very interesting.
The Portfolio Template I bought from you guys a couple of weeks ago has only the MDB Version 4.0.0 but is still compatible with 4.2.0.
That is strange, since the MDB Version 4.3.0 was already released I think???
Nevertheless, as I tried to implement your code with the structure and the attributes within your snippet, I didn't know that my mdb.css-file was not compatible with your code.
Now, since I'm a PRO User and I do have the MDB Version 4.3.0 at hand, what I did is to just substitute every file in my CSS-folder (bootstrap.css, bootstrap.min.css, mdb.css, mdb.min.css) except for my styles.css-file with the equally named files from MDB version 4.3.0.
Now I do see something.
I see the word Navbar on the left, and the Hamburger on the right.
Not bad, but not really what I wanted my solution to look like (see first mail).
Furthermore, when I now click on the Hamburger, the navbar collapses for a millisecond and then uncollapses again. Do you know why?
Another problem I have with the template I used, is that now with the MDB 4.3.0 files my scroll spy looks bad. The dots are now somehow arranged horizontally and vertically anymore.
I'll try to fix it myself.
Thx in advance.
Leo
Hi Kamil,
thanks for the effort, but I still have problems with the navbar.
I tried to understand, what you did differently than me:
You obviously surrounded everything inside of the nav tag in a div tag with the class="container" right away.
Compared to my code, where the button for the navbar toggler is outside of that div.
I can only guess, what difference that makes.
Maybe you could clarify this step for me?
And inside of that collapse button, you included three attributes ' aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation" ', which I didn't have in my code.
These are the main differences I noticed when comparing our two codes with each other.
When I substitute your navbar code with mine, the only thing I see now in my navbar is the navbar brand "Navbar".
Everything else (nav items and icons) is not visible.
I'm not sure why that is the case.
Leo
Hi leopoldus11,
try to use this code. If you have any problems, please write.
<!--Navbar-->
<nav class="navbar navbar-dark unique-color-dark navbar-fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong><!-- or <img src="img-url.jpg" class="img-fluid">-->
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-3">
<a class="nav-link">Features</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags