Unable to hide very long menu items due to Bootstrap Code

0
votes

I'm trying to make the menu items dissapear before shifting into the second row, and making the 3 bar menu pop up as soon as the menu items dissapear as I resize the browser. http://jsfiddle.net/qwwru7eh/

So far I have tried to style them with media queries using display none and display:block with inline css style tags:
I isolated the issues with Bootstrap to the following code, however I cant get the desired effect from styling it:

@media (min-width: 872px) { .navbar-toggle { display: none; } }

@media (max-width: 871px) { .navbar-nav .open .dropdown-menu { position: static; float: none; display:none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } }

HTML: 

<nav class="container-fluid navbar navbar-inverse navbar-static-top">

        <div class="container-fluid">

            <!--Logo!-->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">THE LOGO</a>

             <!--Toggle Button 3 Lines -->                      
               <button type="button" class="navbar-toggle customtogglebtn" data-toggle="collapse" data-target="#mainNavBar">
               <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
               </button>

            </div>

            <!--Navigation Menu Items!-->
            <div class="collapse navbar-collapse" id="mainNavBar">
                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Timeline</a></li>
                    <li><a href="#">Contact</a></li>

                 <!--Dropdown Menu Item with Options!-->   
                    <li class="dropdown">

                        <a href="dropdown" class="dropdown-toggle" data-toggle="dropdown">My Profile<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Friends</a></li>
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Notifications</a></li>
                            <li><a href="#">My Timeline</a></li>
                            <li><a href="#">Log Out</a></li>
                        </ul>
                    </li>

                </ul>

                <!--Right-Align Menu Items!-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Logout</a></li>
                </ul> 
            </div>              
        </div>
    </nav>




         <!--Page Content -->






<div class="container-fluid belowstatic" style="height:1000px; background:#333; bottom:0;">

Static Navigationbar

CSS:

        body { padding-top: 51px;}

        .navbar-toggle { outline:none; border:none; margin-right:-5px; background:none;}

        .navbar-static-top {
  top: 0;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1; 
}

If anyone knows the best way to style the bootstrap menu items elements, please let me know how to do it, and advise me on the best practice for styling bootstrap elements. Thank You!

2
jqueryhtmlcsstwitter-bootstrap-3
i got it your issue. Give me some time. I will do it. - Revti Shah

2 Answers

0
votes

You have a couple options, the first one would be to decrease the padding around the menu items which you could do with this media query:

@media (min-width: 768px) {
  .navbar-nav>li>a {
      padding:15px 10px;
  }
}

JSFiddle example

Another option, if you don't want to change the padding, would be to decrease the font size:

body { 
  padding-top: 51px;
  font-size:13px;
}

JSFiddle example

0
votes

You just need to link jquery. Your menu will work properly. i am sending you code as well as link.If any changes then let me know.

http://jsfiddle.net/1w4o9780/

<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      body {
        padding-top: 51px;
      }

      .navbar-toggle {
        outline: none;
        border: none;
        margin-right: -5px;
        background: none;
      }

      .navbar-static-top {
        top: 0;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1;
      }

      @media (max-width: 991px) {
        .navbar-header {
          float: none;
        }

        .navbar-left,
        .navbar-right {
          float: none !important;
        }

        .navbar-toggle {
          display: block;
        }

        .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
        }

        .navbar-collapse.collapse {
          display: none !important;
        }

        .navbar-nav {
          float: none !important;
          margin-top: 7.5px;
        }

        .navbar-nav>li {
          float: none;
        }

        .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
        }

        .collapse.in {
          display: block !important;
        }
      }

    </style>
  </head>

  <body>


    <nav class="container-fluid navbar navbar-inverse navbar-static-top">

      <div class="container-fluid">

        <!--Logo!-->
        <div class="navbar-header">
          <a href="#" class="navbar-brand">THE LOGO</a>

          <!--Toggle Button 3 Lines -->
          <button type="button" class="navbar-toggle customtogglebtn" data-toggle="collapse" data-target="#mainNavBar">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
          </button>

        </div>

        <!--Navigation Menu Items!-->
        <div class="collapse navbar-collapse" id="mainNavBar">
          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Timeline</a></li>
            <li><a href="#">Contact</a></li>

            <!--Dropdown Menu Item with Options!-->
            <li class="dropdown">

              <a href="dropdown" class="dropdown-toggle" data-toggle="dropdown">My Profile<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Friends</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Notifications</a></li>
                <li><a href="#">My Timeline</a></li>
                <li><a href="#">Log Out</a></li>
              </ul>
            </li>

          </ul>

          <!--Right-Align Menu Items!-->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Logout</a></li>
          </ul>
        </div>
      </div>
    </nav>




    <!--Page Content -->
    <div class="container-fluid belowstatic" style="height:1000px; background:#333; bottom:0;">

      <center>
        <h1 style="color:#fff;">Static Navigationbar</h1>
      </center>
    </div>
    <!--End container-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>

</html>