Hamburger button if viewport is small

[Peper]

Anyone know ho to disable navbar buttons if page is on mobileview or viewport is small?

looking to disable buttons in => includes/modules/content/header/templates/buttons.php

[greasemonkey]

@@Peper We probably need to know what version you are using. I'm assuming the bootstrap community version - but Gold or Edge and how recent.... I think there are recent changes to Edge which may effect the answer (I'm not up on these changes).

 

If using GOLD....the hamburger menu is delivered in \includes\modules\content\navigation\templates\navbar.php

 

With

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

[Peper]

@@greasemonkey Using 2.3.4 edge.

 

The hamburger menu must always be visible, only when viewport is small i want to keep the hamburger buttons to show collapsed or as is.

The other navigation buttons to disappear then when hamburger menu is displayed collapsed - the buttons as specified in includes/modules/content/header/templates/buttons.php

 

Possible?

[MrPhil]

You want to always show the hamburger menu, plus the navigation buttons when not phone size? While I suppose that's possible (perhaps needing changes to the Bootstrap JS and CSS), but will be very confusing to your users. Normally, the hamburger would be shown to indicate that there are hidden (due to size) menu items, that you can bring up in a drop-down menu. If the menu items are available on screen, the hamburger is not shown.

 

Maybe you could add the hamburger as a dummy, greyed-out (disabled) menu item whenever the full menu is shown. That could still be confusing to users. You want to be careful about redefining how standard controls work, as that confuses users and drives them away.

 

Could you elaborate on what you would like your users to see, and how the menus and controls would appear and work at different sizes?

[burt]

 

<div id="headerShortcuts" class="col-sm-<?php echo $content_width; ?> text-right buttons">

 

to

 

 

<div id="headerShortcuts" class="col-sm-<?php echo $content_width; ?> text-right buttons hidden-xs">

 

in the button template file

[Peper]

@@burt

 

Works Perfect  :thumbsup:

 

Added contat us link in nav bar

Now we don't need huge navigation buttons when page is showing on phone