CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobilenavbar
Haag
Haag

Reputation: 31

Bootstrap collapsed menu doesn't show styling

When I open my collapsed menu/nav on my website (the collapsed menu shows at XS and SM screen sizes), I dont receive any styling of my dropdown menu, the links just stands in a row, which ofc is a problem for me. I dont know why the styling doesn't work, and I checked that my php docs links with my bootstrap.css and, so on. I would be glad if someone could help me solve this.

The website: http://www.haagmedia.dk/klf

HTML 

<!-- MENU/NAV MD & LG  MENU/NAV MD & LG  MENU/NAV MD & LG  MENU/NAV MD & LG -->

<div class="row hidden-xs">    

    <div class="navbar-fixed-top">   

        <div class="navbar">
            <ul>
                <li><a href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
            </ul>

            <a href="index.php"><img src="images/klf_logo.png" class="logo-knap"></a>  

            <ul>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a class="active" href="kontakt.php">KONTAKT</a></li>
            </ul>
        </div>

    </div>

</div>


<!-- MENU/NAV XS & SM  MENU/NAV XS & SM  MENU/NAV XS & SM  MENU/NAV XS & SM -->     

<div class="visible-xs">   

<div class="navbar navbar-default navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a href="index.php"><img style="margin-right: -46px;" src="images/klf_logo1.png"></a> 

    </div>

    <div class="navbar-collapse collapse">  
            <ul class="nav navbar-nav">
                <li><a href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a class="active" href="kontakt.php">KONTAKT</a></li>
            </ul>
    </div>

  </div>

</div>

</div>  

<!-- MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT -->

CSS 

/* MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV */
.navbar {
    border: 1px solid transparent;
    height: 91px;
    margin: auto;
    z-index: 1000;
    box-shadow:  0px 1px 14px #A4ABB0;
    background-color: #FFFFFF;
    font-size: 15px;
    text-align: center;
}

.navbar ul {
    padding: 0;
    list-style-type: none;
    display: inline-block;
    margin: auto;
}

.navbar ul>li {
    float: left;
    display: inline;
}

.navbar ul>li>a {
    color: #A4ABB0;
    padding: 42px 29px 23px 29px;
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: bold;
    border-bottom: 5px solid #FFFFFF;
}

.navbar .active {
    color: #208AF0; 
    border-bottom: 5px solid #208AF0;
}

.navbar ul>li>a:hover {
    color: #208AF0;
    border-bottom: 5px solid #208AF0;
}

.navbar a>img {
    position: relative;
    display: inline-block;
}



/* MENU/NAV COLLAPSED   MENU/NAV COLLAPSED   MENU/NAV COLLAPSED   MENU/NAV COLLAPSED */
.navbar-toggle {
  margin-top: 24px;
}

.navbar-toggle .icon-bar {
  width: 30px;
  height: 5px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FFFFFF;
}

.navbar-default .navbar-toggle {
  border-color: #FFFFFF;
}

.navbar-default .navbar-toggle.collapsed {
    border-color: #FFFFFF;
}

.navbar-default .navbar-toggle.collapsed .icon-bar {
    background-color: #A4ABB0;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color:#208AF0;
}

Upvotes: 0

Views: 695

Answers (1)

dpedoneze
dpedoneze

Reputation: 959

You are overriding the bootstrap css, which is ok, but you have to be careful with it, look at your stylesheet.css at line 28:

.navbar ul>li {
  float: left;
  display: inline;
}

and on your line 35:

.navbar ul>li>a {
  color: #A4ABB0;
  padding: 42px 29px 23px 29px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 5px solid #FFFFFF;
}

those styles are ALWAYS been applied to your .navbar, and because of that your "mobile navbar" (ie. XS ans SM) is having this wrong behaviour.

You can add some media queries to fix it, so you can apply diference style roles to your navbar, depending on your display size.

Some media query example: 

@media(max-width: 767px){
  .navbar ul>li {
    // your css to make your collapsed menu works as you wish
    // just remove your float and it will shows as a list
    // and not in a row
  }

  .navbar ul>li a {
    // display block, small padding should works too
    display: block;
    padding: 15px 29px 5px 29px;
  }

  .navbar ul {
    // also set you ul to display block so your list be get 100% width
    display: block;
  }
}

you can use more than one media query, so you just need to be creative :)

Upvotes: 1

Related Questions