You could try this:
<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">
Solution 1 :
Solution 2 :
Try adding the below style:
.navbar.scrolled .navbar-collapse{
background: #116980;
margin: -15px;
padding: 15px;
z-index: -1;
}
The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.
Problem :
I have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn’t cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div2" class="navbaritems">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div3" class="navbaritems">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div4" class="navbaritems">Resume</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="mailto:[email protected]" target="_blank"><img src="img/email.png" style="width:35px;height:35px;border-radius:25px;"></a>   
</li>
<li class="nav-item active">
<a href="https://www.linkedin.com/in/abdullahameen/" target="_blank"><img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;"></a>   
</li>
<li class="nav-item active">
<a href="https://twitter.com/AbdullahAmeenn?lang=en" target="_blank"><img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;"></a>   
</li>
</ul>
</div>[![enter image description here][1]][1]
</nav>Comments
Comment posted by Sebastian Devassy
If you can add your css code too, we would be able to help you. Seems like it should be the padding of the item above a tag is causing it, its just a wild guess. Could you please add css too or a working example?
Comment posted by vadivel a
can you share snippet demo?
Comment posted by codepen.io/AbdullahAmeen/pen/MWweKPv
Sure, however there are several html pages, images (maps) and PDF files that are linked to this project so I can not share the whole project, but what I can do I already shared the navbar code and the whole CSS file here:
Comment posted by John
Thanks for this. I added the above code to my style.css file and it doesn’t change anything. I still have that problem.
Comment posted by John
Thank you Aluminium Shek and Juan Garcia! Finally I followed both of the recommendations and the problem is solved now. Here is what I did: HTML: