Alan Tingey
Alan Tingey

Reputation: 961

BOOTSTRAP 3: Custom Navbar Toggle Issue

I have red lines between my menu option on my Bootstrap 3 navbar as can be seen in the image below:

enter image description here

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: enter image description here

When I scroll right all it shows is the red bar as per below:enter image description here

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

Answers (2)

Suraj Kc
Suraj Kc

Reputation: 97

You could simply use

@media (max-width:768px) { 
  .navbar-nav {
    overflow-x:hidden;
  }
}

Upvotes: 1

Gerard
Gerard

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

Related Questions