Twitter Bootstrap Question posted in

Navbar responsive menu – Twitter bootstrap

I’m making a menu with twitter bootstrap CSS. For the mobile version, I want to replease some icons to text. I want to do this at the breakpoint of 768px (when the hamburger icon appears).

Menu html

   <div class="navbar-collapse collapse">
    <nav role="navigation" class="navigation">
        <ul class="menu nav navbar-nav" style="margin-left: 95.5px; margin-right: 0px;">
            <li class="first leaf active" id="homeLink"><a href="/"><i class="fa fa-home fa-lg"></i></a></li>
            <li class="leaf"><a href="/link">item</a></li>
            <li class="leaf"><a href="/link">item</a></li>
            <li class="last leaf" id="contactLink"><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</div>

Javascript

if(jQuery("body").prop("clientWidth") > 768){
    jQuery("#contactLink").html('<a href="/contact"><i class="fa fa-envelope fa-lg"></i></a>');
}

But the width isn’t the actual width that is used in the bootstrap CSS. I want to change it when the hamburger icon appears. I tried also innerWidth of the window/body (solutions after searching the net).. Nothing works..

I’m now trying to get the “state” of the menu. But so far, I couldn’t find changes..

Is there a way (in JS / JQuery) to get the state of the menu? Or a way to solve the width (without adding extra html…)?

Tags:

2

Answers


  1. 0

    Try converting your jquery logic into media query like (the below given snipped is only an example, you need to replace them according to your need),

    @media (max-width: 768px) {
  .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;
  }
}

    and then try.

    Login or Signup to reply.
  2. 0

    If you can get this to work with media queries in CSS this would probably be the best way to go about it, but if you can’t set the text instead of the icon by doing this, you could maybe try something along these lines in JS:

    if ( $(window).width() < 739) {      
  //code to set the html to text
} 
else {
  //code with icon
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search