Menu width

Sydney Pro
#1

Hi,

My website is:

Regarding the header menu, I have recently added a new top menu which is now causing the main menu to be spread over 2 rows, in most browsers…something that doesn’t look very good from a user perspective.

One solution to get the menu back to 1 line is to reduce the header font size from 17 to 15, but I’d prefer to keep at 17 as 15 is too small.

There’s a lot of space to the left of the menu and after the logo (seems like margin). Is there anyway that I can reduce the size of this margin/padding so that my main menu can fit again on 1 row?

Essentially I am looking to reduce the amount of blank space between my logo and the menu.

Thanks in advance.

#2

Hello @hopin,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

#mainnav ul.menu > li.menu-item {
    padding: 0 7px !important;
}

Kind Regards, Roman.

#3

thanks - that reduces the padding between the menu items, so everything is on 1 line now, but more squashed up.

what i was originally hoping was to keep the padding between the menu items the same (it looks nice), but expand the width of the page that the menu takes up as there’s currently a lot of empty space between the menu and the logo.

Does that make sense? Is it possible?

Thanks!

#4

Hello @hopin,

Yes, it’s possible, but it requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

#5

ok thanks - I’ll stick with your solution :slight_smile:

good enough!

#6

Okay @hopin, you are welcome.

Have a nice day!

Kind Regards, Roman.

#7

Hello guys - For some reason, I am unable to create a new support ticket. Am using Perth theme and my Menu style is STATIC, INLINE. I have several items on my Menu and also need a larger font size. Presently my Menu is running in to two rows. I see that there is enough white space between the logo and first item on the Menu (in my case it is HOME). Is there a way I can reduce the white space? I tried several codes proposed by you in other Support threads; none worked! My site link is:

http://pustakanchgaav.intelliassist.co.in/

Awaiting your help. Thanks.

#8

Hello Ami,

You can try to use the following CSS code in order to extend your menu area.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

@media (min-width: 1025px) {
    .site-branding {
        width: 150px;
    }

    #site-navigation {
        width: calc(100% - 150px);
    }
}

Please try to create a new topic in appropriate forum once again for your font size issue.

Kind Regards, Roman.

#9

Thank you @Roman. It worked!

#10

You are welcome Ami! :slight_smile:

Kind Regards, Roman.