[Resolved] Menu on the left

[Matthieu]

It’s all starting to take shape! Thank you very much ! 😃
Last things:
– Is it possible to display this menu only on a computer?

– Can we reduce the width of the side menu? I see it is set to: width: 300px currently. Except that if I reduce to 250px or 200px I have the “gray bar”, which reappears …

Thanks : 😁

[Ying]

– Is it possible to display this menu only on a computer?

The current layout only works when the screen is 1000px or wider that’s why we added media query in CSS.
Have you tested on mobile or ipad?
This is what it looks like on ipad:
https://www.screencast.com/t/8JSP2Kwcu8
and this is on mobile:
https://www.screencast.com/t/8JSP2Kwcu8

– Can we reduce the width of the side menu?

Yes, if you change the site header width to 250px in the CSS, then change this to 250px as well:

body {
    margin-left: 300px;
}

Also you could change the body background color to #ffffff at customizer > colors > body.

Let me know 🙂

[Matthieu]

Thank you for your reply ! By modifying the css: body {
margin-left: 300px;
}

at
body {
margin-left: 200px;
}

– It reduces the width of the menu but the content of the page does not move or I would like that I reduce the width of the menu to 200px, I would therefore like the content to be 200px wider. You see what I mean ? 😅

– For mobile and tablet display, is there a solution to put the Lightweight Social Icons in the menu and not below ?

Thanks

[Ying]

– It reduces the width of the menu but the content of the page does not move or I would like that I reduce the width of the menu to 200px, I would therefore like the content to be 200px wider. You see what I mean ?
I’m not sure I understand your request clearly.

I changed the site header color so that you could see it more clearly:
https://www.screencast.com/t/9ZL0tEoJDNi

As you can see, your site header is now 250px wide, so you need to change the body margin-left to 250px as well, otherwise 50px of the body background will be shown.

– For mobile and tablet display, is there a solution to put the Lightweight Social Icons in the menu and not below ?

Try add this CSS:

@media (max-width: 768px) {
    .site-logo {
        order: 1;
    }
    .site-header .header-widget {
        order: 2;
        margin-top: 0;
        flex-basis: auto;
    }
    nav#mobile-menu-control-wrapper {
        order: 3;
        margin-left: 20px;
    }
    .inside-header .header-widget .lsi-social-icons li {
        margin-bottom: 0 !important;
    }
}

[Matthieu]

So for the computer version it’s perfect, everything seems good to me, thank you very much.

– For the addition of this part:

@media (max-width: 768px) {
.site-logo {
order: 1;
}
.site-header .header-widget {
order: 2;
margin-top: 0;
flex-basis: auto;
}
nav # mobile-menu-control-wrapper {
order: 3;
margin-left: 20px;
}
.inside-header .header-widget .lsi-social-icons li {
margin-bottom: 0! important;
}
}

The rendering is not what I expected. The menu opens upside down. 😅

[Ying]

The example site you linked to us has the same menu style on mobile which opens upside down , thought you were trying to achieve the look of that site 🙂

You could add this css in before the last } of the css in your last reply:

#site-navigation {
    order: 4;
}

[Matthieu]

OK perfect thank you!

– Last thing, on the mobile and tablet display, when the menu is open, you can see a light gray background, how could I remove it for white?

– Can we manage the margins between the menu items (Home / blog / contact)?

Thank you so much !

[Ying]

Yes, you could change colors at Customizing > Colors > Primary Navigation, change menu item height at Customizing > Layout > Primary Navigation.

[Matthieu]

Thank you for your reply. In Personalization> Layout> Main navigation> Size of the menu item I can adjust the heights between the menu links (Home / Blog / Contact) on the computer and mobile version, the tablet version does not move and the elements are glued together.

For the colors, I modified all the backgrounds in Personalization> Colors> Header / Main Navigation / Secondary Navigation / Side panel, nothing helps there is always this gray background around “Blog / Contact” when the menu is open on mobile and tablet.

[Leo]

Are we referring to these options here?
https://docs.generatepress.com/article/menu-item-height-width/

If so there are only desktop and mobile version available.

The breakpoint would be the mobile navigation break point.

Let me know if this helps 🙂

[Matthieu]

Yes exactly, it does not affect the space between my menu links in the tablet display …

[Leo]

Are you talking about this view here?

Looks like the customizer setting is at 50px
https://www.screencast.com/t/9uGeZAGzy

Is that correct?

[Matthieu]

So in fact I just understood the problem, let me explain:

In Personalize> Layout> Main Navigation> “Width of the menu item” It is set to 0px on the computer display and therefore tablet … This is why my menu items (Home / contact / blog) are glued together on a tablet.

Except that I cannot increase this setting otherwise it will shift these links on the computer display.

Is there a solution to manage “menu item width” only on tablet ? 😃

Thanks.

[Elvin]

Hi there,

You should be able to control the main navigation with the .main-nav > ul li selector.

Example, adding padding to make it look wider on tablet.

@media ( min-width:769px ) and ( max-width:1024px ) {
.main-nav > ul li {
    padding: 0 10px;
}
}

If you want the menu to be a hamburger on tablet like your reference site, you’ll have to change the Mobile Menu Breakpoint on customizer from 768 to 1024.

[Matthieu]

It’s perfect ! Thanks 😀

[Author]

Posts