Sandwich button in Agency theme

Support Themes & Styling
1

Please I need your assistance. How can I change the width at which the sandwich button on top right appears and the standard top menu disappears? Currently the breakpoint is (I guess) 768px, but that’s too low for my needs. In global.css I have edited this entry:

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

into this one

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

but unfortunately that did not do the trick.

Anyone using Agency theme can help me here? That would be much appreciated. Thanks.

2

Hi @gilibaus,

Same question here with my theme based on Antimatter. I have +8 items in my navigation menu, so if I visit my website from an iPad (for example), the navigation menu appears below the logo of the website.

I have found an SCSS file that defines breakpoints, but I can’t edit it as easily as a classic CSS file (I’m using Sublime Text + FileZilla on a Windows computer)… :frowning_face:

An issue was open 2 years ago on GitHub but nobody seems to be able to resolve it :

So for instance, I’m stuck, just like you.

Does anyone can help us?
Thanks!

3

Yeah, clean up your navigation, restyle your navigation or update Bootstrap in the theme to the latest, as version 3rd does not allow changing breakpoint in easy way.

4

In the end, I finally managed to deal with the breakpoints by adding these lines in my custom.css file :

@media only all and (max-width: 89.938em) {
  #header #navbar ul.navigation {
    display: none !important; } }
@media only all and (max-width: 89.938em) {
  #header #navbar .panel-activation {
    display: inline-block !important; } }

@media (min-width: 1200px) {
  .sb-width-thin {
    width:15% !important; } }

The first block controls the (de)activation of the standard menu vs. the panel menu while the second block gives the side panel some space to breathe.

Feel free to copy and edit my workaround if you want @gilibaus :wink:

1 Like
5

Worked perfectly! Saved me alot of work! Thanks!