Issues with Configuring Menu Margins

themoodproject · August 21

Here is the website: https://praxoglobal.com/home/

The menu is created using the Theme Options, but I can't find a way to adjust the side margins. I want to align them with the margins of the website, but in the Theme Options, there's only the option to set it with practically no margins (the 'Full width' option, which doesn't work for me because it doesn't leave enough space), or to center it more (Boxed Sticky Header), which doesn't work either because when scrolling, the logo isn't aligned with the headlines (which are aligned to the left).

I noticed that in the Theme Options, you can adjust the menu's height, but I don't see where to adjust the side margins. How can I do that?

Phil · August 21

Hi,

Please go to Betheme -> Theme options -> Global -> Logo, and check an option to remove the left margin.

Best regards

themoodproject · August 21

The problem is not this, since if you now go to the link on the website, the menu has no margins now. What I want is for the menu to have the same side margins as those throughout the website, so that the logo is aligned with the headlines on the left and the 'Contact' item in the menu also has the same left space as the other blocks on the website. Perhaps it cannot be adjusted from the Theme Options and something else needs to be done...

Phil · August 21

Right now, you have activated the full-width option.

Please deactivate it so I can take a second look at this.

Thanks

themoodproject · August 22

Hi! I've already deactivated the full-width option.

The right and left margins of the menu are not exactly the same as the margins of the different blocks on the website. But maybe they can't be adjusted in any other way from Theme Options. Let me know.

Thanks!!!

Phil · August 22

Please use the following CSS code:

#Header .container{
 padding-left: 0!important;
 padding-right: 0!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

themoodproject · August 27

Hi!

I’ve added the CSS code in the Theme Options, and it’s working perfectly. Thank you so much.

However, I have another issue: on mobile, the menu appears without margins (specifically the logo, and I’m not sure if it’s due to the CSS I’ve added). As you can see in this screenshot, the logo is touching the top and left edges of the screen, whether you’re at the top of the page or scrolling.

Can you help me add margins to the header logo?

Thanks!

Phil · August 27

Please also try this CSS code:

@media only screen and (max-width:767px){
 .logo-no-margin #Top_bar .logo{
   margin-left: 15px!important;
 }
}

Best regards

Issues with Configuring Menu Margins

Comments