code for menu mobile

Hello @psycholoogmarieke,

For our Nav Menu, you can change the size, line height, and letter spacing in mobile view for the typography. You can do that by :

1. go to the editor and click on the ‘nav menu’ block that you have placed on your page.
2. click on ‘settings’ at the top left corner or you can press ‘ctrl + shift + ,’ in Windows or ‘command + shift + ,’ in Mac.
3. on the right side, you can find the ‘style’ section and click on it.
4. scroll down to find ‘item menu style’. In there you will find ‘typography’.
5. click on the ‘pencil’ icon and more menus should appear. On the left side of size, line height, and letter spacing you can find the ‘device icon’. You can select the device to change the size, line height, and letter spacing responsively.

if that is not what you are looking for, and want to add your own css code you can do that by:

1. go to the editor and click on the ‘nav menu’ block that you have placed on your page.
2. click on ‘settings’ at the top left corner or you can press ‘ctrl + shift + ,’ in Windows or ‘command + shift + ,’ in Mac.
3. on the right side, you can find the ‘settings’ section and click on it.
4. scroll down to find ‘advanced’ and click on it. add your own CSS classes on the item.
5. back to the editor, make a new ‘section’ and add a ‘custom html’ block, and write your CSS code there.

you can find our menu class if you right-click on it and select inspect element (in this case, our menu item class is ‘menu-item’). if you want reference here where I change the background color of the menu item. here I added the class “added-menu” for the menu block.

<style>
 @media screen and (max-width: 500px) {
   .added-menu .menu-item a{
     background-color:red;
   }
 }
</style>

I hope this help!

• This reply was modified 1 year, 4 months ago by gowinda.

Hi Gowinda, thank you for your reply. The issue is that when i change the typography, its also changing for desktop screen and not only for mobile screen. I can not give them seperate layout? Like for example 600 weight for the menu typography on mobile and 500 weight for desktop

Hi @psycholoogmarieke
As I stated before, you can change the size, line height, and letter spacing responsively for the typography. Unfortunately, we are not doing responsiveness for the weight.
For right now, if you need to, try using manual CSS.

Hi, I have made this code but nothing chances.. Any idea why not?

@media screen and (max-width: 500px) {
.added-menu .menu-item a{
font-family: poppins;
text-transform: uppercase;
font-size: 16pt;
font-weight: 500;
letter-spacing: 2px;
}
}

Hi @psycholoogmarieke

it’s working for me

https://ibb.co/NxBPhPp

Here are some step you might miss.

1.add new class to the nav menu block.

https://ibb.co/XJ5ZK8Q

2.use custom html block in your website.

https://ibb.co/6ryN45Z

3.wrap the css code to a <style/> element.

<style>
{your code here}
</style>

4. make sure the classes in your CSS code route to the correct path to the element you want to change the style. you can do this by right-clicking at the block and choosing inspect element. it should look something like this.

https://ibb.co/rQjPqkQ

as for the example you asked, i suggest it would look like this.

<style>
    @media screen and (max-width: 500px) {
    .guten-nav-menu.added-menu .gutenverse-menu-wrapper .gutenverse-menu li a{
    font-family: poppins;
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: 500;
    letter-spacing: 2px;
    }
    }
</style>

• This reply was modified 1 year, 4 months ago by gowinda.

i tried with html block but cant seem to fix it. is there no CSS just for the typgraphy?

Hi @psycholoogmarieke

I’m sorry it does not work for you, but unfortunately, we don’t do responsive typography just yet other than the size, line height, and letter spacing