gowinda

Hi @psycholoogmarieke

your logo should be an image block. if you click on the block in the editor and select the style panel, you will see the device logo by the left of width and height. https://ibb.co/KwNQ77n

if you click on the device logo and select mobile, it will be set responsively to the device you choose.

Hi @clientifica

We actually have that features in the pro version. do you perhaps have gutenverse pro ? if so I can guide you on how to make a pop up on button click.

Hi @psycholoogmarieke

try adding this in your css

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children .sub-menu {
box-shadow: rgba(45, 45, 45, 0);
background-color: rgba(27, 66, 53, 0);
}

Hi again

I have checked your CSS and nothing says about the submenu background or box-shadow. if it’s the background color and box-shadow for the submenu, we actually have it in our style panel for the nav menu.
set the box-shadow color transparent way down in the submenu panel style

https://ibb.co/zP8h5Dj

and also set the background color transparent way down in the submenu panel style

https://ibb.co/88ZX2qj

and last set the background color transparent way down in the submenu item style

https://ibb.co/Bff3BW4

Hi again

I have checked your site style and it seems there is a section in your header(maybe a spacer) it doesn’t have anything but has margins of -8 px and I think maybe that is what causing the page overflow.

https://ibb.co/3mcbyKx

• This reply was modified 1 year ago by gowinda.

Hi @sixpsbmarketing

Gutenverse should work with any role. but you may want to recognize that in wordpress, as there are some role with their own capability. like editor can edit any post but author only can edit post that they create.

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

Hi @calvindebeverly

I don’t think you could do that. Can you tell me what you are trying to achieve by doing that? maybe I can try to help with some alternative.

Hi @psycholoogmarieke

I’ve looked at your website and I see no difference in the submenu background from mobile or desktop.

if you want to change the submenu style you can click on the nav menu block and open settings (ctrl+shift+,). and then go to the style panel. in there, you should find the submenu item style and submenu panel style. try changing the background as you like and adjust it to mobile and/or desktop.

Hi @psycholoogmarieke

in editor change the view to mobile

and then you can check the block one by one to find which one was causing the issue. check the style, its probably the width, padding, or margin that causing it.

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 ago by gowinda.

Hi @maxmhowell

have you tried checking updates for the theme? you can find it in “Appearance” -> Themes, there you will find if a theme has update or not.

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.

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 ago by gowinda.

Hello @thilu

Sorry for your inconvenience, I checked the link you provided but it seems all work just fine on my end. could you elaborate more on which option does not work? it would be better if you could provide a screenshot or a screen capture.

thank you.