Force Mobile Menu

[guybower1]

hi

I want my navbar to switch to the mobile view when the screen size hits 979px, but with the logo remaining on the left where it is and the hamburger menu sitting in the centre and the button still on the right.

I found the following code in a post to enable the hamburger menu, but it did not work for my site.

@media only screen and (max-width:979px){
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display: block;
        float: right;
    }
    .x-nav-wrap.mobile.in,
    .x-nav-wrap.mobile.collapsing {
        display: block;
    }
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: relative;
        top: 0;
    }
}

None of the selectors in the above did anything for the navbar, so I checked Google Dev and used .x-bar, .x-bar-is-sticky or .x-bar-h alternatively, but they simply removed the entire navbar altogether, so no good there. I then tried .x-bar-menu and this did what I wanted in removing just the 4 menu items, so that part solved. Now how to have the hamburger menu appear in the centre of the navbar?

cheers

[guybower1]

OK, after some research, I have found that I can do some of what I want directly in the header builder, so have now got it to the stage where the hamburger menu appears from 979px and below and have positioned it roughly centre at 979px using a 12em right margin

I would like to try and move the burger to the centre point between the logo and the button at 767px. I tried this CSS

@media screen and (max-width: 767px) {
  .x-toggle-burger {
  margin-right: 6em;
}

but it did not move the burger at all.

Any suggestions as to how to align the burger horizontally at that screen size?

cheers

[guybower1]

Hi again

I eventually gave it an ID of burger and added

@media screen and (max-width: 767px) {
#burger-anchor-toggle {
  margin-right: 5.5em;
}

and it behaved as intended, but I am wondering if this is all a cumbersome way to achieve the end result. Is there no way to give the ID burger properties which keep it in the centre of the available space using maybe VH or VW settings? Then just the single media query at 979px and below and the burger moves seamlessly, always remaining in the centre of the available space.

cheers

[guybower1]

and yet again

OK, so all resolved at everything except 480px and below, where this is what the look is

That is obviously not what is wanted, but where to head? Reduce the height of the navbar; reduce the size of the button and logo, reduce the space around the logo and button?

I still hope there is a way to responsively place the burger from 979px and below so it remains centred between the available space and I can just look to manipulate the other items at this final screen size

cheers

[guybower1]

I tried this with the logo. I gave it a class of logo and then added this in element CSS

@media screen and (max-width: 480px) {
 .x-image.logo {
  margin-left: 0.1em;
}

It did not move the logo to the left at all, even after trying multiple other selectors

Any suggestions

cheers

[marc_a]

Hi @guybower1,

Thanks for reaching out and we are glad that you are able to fix some of your issues. I would recommend when the screen size is below 480px, you need to reduce the width of the image, make the button a bit skinner and also make the hamburger menu a little bit smaller to fit your header on the mobile. I tried to use your CSS in the mobile and there is nothing wrong with it, your CSS code is working. I hope it will help you to solve your issue.

Thank you.

[guybower1]

hi Cramaton

Thanks so much for your reply

Yes, in the end, I used a negative left margin for the logo to bring it closer to the side and also made it more responsive, sizewise, so the left side is now fine.

I have also reduced the width of the button, but am struggling to put the same negative right margin on it, to move it closer to the right. I tried initially targeting the button, but then the finally I tried to apply a negative right margin to the container like this. I gave the container an ID of navright and added this CSS in the element CSS

$el
@media screen and (max-width: 480px) {
#navright.el3800-12.x-bar .x-bar-container {
  margin-right: -1.2em;
}
}

This had no effect on the container, so am scratching my head as to how to apply a negative margin to it. I have also tried a variety of other selector combinations, but to no avail

The other thing I did was to reduce the height of the bar with a media query at 480px, but at 480px, all of the content sits at the bottom of the bar, whereas above 480px, everything sits perfectly in the centre

Any thoughts on how to realign the bar contents to the centre? The flexbox setup is for vertical alignment centre, so not sure what is pushing it to the bottom at 480px

cheers

[nabeel]

Hey @guybower1,

Instead of using custom CSS, a better solution is to create two Bars (one for the desktop and one for the mobile screens) and then using Hide During Breakpoint feature show / hide Bars based on the screen size.

This way you can design any layout in individual Bars and you don’t need to use custom CSS. Here’s a thread you can follow that will guide you step by step: Mobile Menu no toggle

Hope this helps!

[guybower1]

Hi Nabeel

Thanks so much for getting back to me.

Excellent suggestion. It worked much better. Thanks so much for your input

Regards

[tristup]

Hi @guybower1,

Glad to help you.

Thanks