Reputation: 961
I have red lines between my menu option on my Bootstrap 3 navbar as can be seen in the image below:
This is achieved using the following code:
<style>
.navbar-nav li{
position: relative
}
.navbar-nav li:after{
content: '';
position: absolute;
right: -2px;
width:2px;
height: 50%;
top: 25%;
background: red
}
.navbar-nav li:before{
content: '';
position: absolute;
left: 0px;
width:2px;
height: 50%;
top: 25%;
background: red
}
</style>
The problem I have is that when the browser window size drops below a width of 768 the toggle button kicks in and once selected shows an ugly scroll bar at the bottom of the drop down as seen below:
When I scroll right all it shows is the red bar as per below:
I have tried various options and it seems the solution is tied to the media width of the page but I just can't quite get it all working. Ideally I would NOT show the red bars when the bootstrap toggle kicks in.
Any help on this would be appreciated.
Upvotes: 0
Views: 52
Reputation: 97
You could simply use
@media (max-width:768px) {
.navbar-nav {
overflow-x:hidden;
}
}
Upvotes: 1
Reputation: 15786
You need to define the red lines within a media query. There most likely is a media query defined already since you use bootstrap.
@media (min-width: 768px) {
.navbar-nav li:after{
content: '';
position: absolute;
right: -2px;
width:2px;
height: 50%;
top: 25%;
background: red
}
.navbar-nav li:before{
content: '';
position: absolute;
left: 0px;
width:2px;
height: 50%;
top: 25%;
background: red
}
}
Upvotes: 1