Use both stacked & inline navbar options depending on breakpoint

[Mama_Miod]

Hello Team,

I’ve went through multiple threads but can’t seem to find the solution.

I am using X Theme, Integrity.
For the navbar, I have fixed top selected & stacked so the logo appears on top of the navbar. For mobile & tablets, I want the logo to appear to the left of the hamburger icon which would make it inline. Is there a way to do this? Or by selecting “stacked” it needs to be stacked across all breakpoints and there is no room for flexibility?

Another point, I noticed even though I select “fixed top”, on mobile, the menu is not fixed to the top. It disappears. Is there a way to make it fixed on mobile view as well?

Thank you!

[christopher]

Hi Sylvia,

The X theme does not have the option to change the mobile menu mode from stacked to inline based on the breakpoint. If you want such a feature you need to consider converting the X theme to the Pro theme and recreate the header of the website using the Header Builder of the Pro theme. There you have an option to use different layouts based on the breakpoint.

• For more information on the Header/Footer builder please kindly check this link.
• For more information on the X to Pro conversion please kindly check this link.

The mobile menu in the X theme is not sticky on mobile devices due to the fact that browser window is small and it will not be a good idea to have the menu reducing the active screen size. You can override this using the custom code given here.

Thank you.

[Mama_Miod]

Great thank you for the quick reply!

Building on the response, I did try the inline option. The only issue I have for that is that when it comes to display size of 768px - 979px, the logo stacks on top of the navbar. To provide a solution for this, is there a way to:

1. Make the logo image responsive to screen size? So the size is reduced in order to fit logo & navbar on one line (768 - 979px).
2. If it’s too complex to make the logo size responsive, then can the mobile button be displayed for this breakpoint?

Screenshot below:

Thank you

[rad]

Hi Sylvia,

I’m not sure which break point is in your screenshot, but it should be already turning to mobile menu for 979px and below. So I assume you’re referring to tablet break point which is 1024px. For that, please add this CSS to Theme Options > CSS

    @media ( max-width: 1024px ) {
     .x-btn-navbar {
     display: inline-block;
     }
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile:not(.x-collapsed), .x-nav-wrap.mobile.x-collapsing {
display: block;
}
.x-brand img {
width: 90px;
}
    }

It should display mobile menu on 1024px breakpoint while changing the logo’s size. This is just the idea, and still more to it so I recommend contacting a developer for further customization, or follow Christopher’s recommendation.

Thanks!

[Mama_Miod]

Hi Rad,

Yes you are right. The mobile menu comes up for 979px and below. What I was referring to is the view from 980px-1199px.

I adjusted the screenshot so you can get a better idea:

I put your code in. The only thing that happened was the logo size was reduced for screens with a max width of 979px. Otherwise for tablet view, it stayed the same. I tweaked the code a bit to reduce the logo size just enough to have it fall inline with the navbar in the 980-1199px view by increasing the breakpoint. Does this make sense from your perspective?

My main goal was reducing that logo size so it displays inline with the navbar. I guess I assumed the logo would be responsive and resize on it’s own depending on the screen size but it seems to be fixed.

Thank you for your help on this!
Sylvia

[thai]

Hi Sylvia,

Please also add this custom CSS:

@media (min-width: 980px) and (max-width: 1100px){
    .x-brand img {
        width: 160px;
    }
}

It will reduce the logo size on screen size from 980px to 1100px.

Hope it helps

[Mama_Miod]

Hi @thai,

Thank you so much!! Works beautifully!
Thank you all for your help.

Best,
Sylvia

[rad]

You’re most welcome Sylvia!