Leftnavigation for different Media Queries

[McKnule]

Hello,

I would like to place the navigation on the left side and the company logo on the right side in the header.
For the Desktop Media Query, this is mostly already done, but I’m having troubles with the smaller viewports.

I want to place the burger menu and the company logo on smartphone and tablet,
as I show it on the image.

Could you please help me with this?
I step on the spot.

In my custom.css I have already tried some adjustments to it.
Unfortunately, I did not have the hoped-for success.

For resolutions greater than 1060 pixels, I have the problem
that the first menu item is not left-aligned - I can not find a solution for this too.
The company logo should still move a bit more to the right.

Thank you in advance.

Best regards
Ingo

[Prasant]

Hello Chantal,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .masthead-inline .x-btn-navbar {
    float: left;
}

.x-brand {
    float: right;
}
}
.x-brand img {
    float: right;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[McKnule]

Hi Prasant, thank you for your quick answer.
That works fine.
But I still have one problem:
The Hamburger Menu stopps working with 980px and I can’t find something responsible for that in my CSS.
I want to keep the Hamburger Menu until a size of 1060 px.
Do you know what to do?

Thanks in advance.

Greatings
Ingo

[mldarshana]

Hi Ingo,

It’s not recommend to break the CSS for mobile nav to visible in the desktop. There are several other options you can use for the same, like Uber menu.

If you really want to customize the menu, you may try following this thread (https://theme.co/apex/forum/t/how-to-force-responsive-menu-in-ipad-in-landscape-mode/41591).

Thanks!

[McKnule]

Hi Mldarshana,

that worked perfect for me.
Cheers.

[jade]

You’re welcome!