[srscott44]

Hi there,

First of all – great theme!

I’ve been working with it to try and make an updated website for the model flying club I’m a part of. I’ve used the forums here for a few custom items and it has been great. I’ve lots to update on my site but the basics are nearly there.

I’ve been trying to change the font size in the main menu with the different custom CSS codes that I’ve read here which makes it appear the right size in the live preview but when saved and you refresh the page on another tab it remains small.

The custom CSS codes I’ve tried are:

#access .menu .menu-item {
font-size: 22px;
}

#access ul.menu li {
float: none;
display: inline-block;
}

.menu-header-container {
text-align: center;
}

And:

@media screen and ( max-width: 1200px ) {
.menu.catchresponsive-nav-menu li a {
font-size: 22px;
}
}

My website is: http://www.stangelomfc.co.uk

Any help would be very gladly received.

Thanks

Stevie

[Mahesh]

@srscott44: Why are you using @media? This will make the font-size bigger only with the screen size of width 1200px and below that.
Please use the following CSS instead.

.menu.catchresponsive-nav-menu li a {
    font-size: 22px;
}

Regards,
Mahesh

[srscott44]

Hi Mahesh,

To be honest I haven’t a clue why I was using @media – was just copy and pasting code I found here!
What way could I centre the menu items and also just the padding on either side of the text? I want to hide a page but still keep the menu looking good.

Thanks for your help

Stevie

[Mahesh]

@srscott44: Add the following CSS:

.nav-primary.search-enabled {
    text-align: center;
}

.nav-primary.search-enabled .menu {
    float: none;
}

.catchresponsive-nav-menu li, .sidebar-header-right .widget_nav_menu li {
    float: none;
    text-align: none;
}

Regards,
Mahesh

[srscott44]

That’s fantastic, thanks so much.

Stevie

[Mahesh]

@srscott44: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts