Typography of Links in Primary Sub-menu

Hi there,

I've checked your site and the CSS you've added on Appearance > Customize > Additional CSS seems to have plenty of syntax errors.

I've copied the CSS and rewritten it to fix the syntaxes.

You can try completely replacing ALL the CSS contents within your site's Appearance > Customize > Additional CSS with this:

.top-bar {
    background-color: rgba(247,248,249,0.09);
	border-bottom-width: 1px;
	border-bottom-color: #f7f8f925;
	border-bottom-style: solid;
}

.header-wrap {
	box-shadow: 0px 1px 3px 0px #00000010;
}

.footer-widgets .widget-title {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #3065B5;
	margin-right:50%;
	padding-bottom: 15px;
}

.frm_name{
	float:left;
	max-width:49%;
	margin-right:2%;
}
.frm_email{
	float:left;
	max-width:49%;
}

@media screen and (max-width: 800px) {

    .frm_name{
        float:none;
        max-width:100%;
        margin-right:0px;
    }
    .frm_email{
        float:none;
        max-width:100%;
    }
	
    .main-navigation .main-nav ul ul li a {
        font-weight: normal !important;
        font-size: 17px;
    }
	
    .menu-item .menu-item-type-post_type {
        padding: 0px;
        margin-top: 13px;
        margin-bottom: 13px;
        margin-left: 10px;
        margin-right: 10px;
        background-hover: blue;     
	}		
}

I've already added in font-size: 17px;.

Hi Elvin,

thanks for your quick support :) seems to work :)
quick follow-up: Sub menu items are supposed to get that blue background on hover, but that background should stretch from left to right; would prefer it to have margins of 10px on the sides. That seems to work on the left side, but on the right side the background overshoots the box by 10px instead of getting reduced by 10px. What can be done there?

Thanks,
Marc

The overshoot is from the margin-left from the custom CSS you've added which is this one:

.menu-item .menu-item-type-post_type {
    padding: 0px !important;
    margin-top: 13px;
    margin-bottom: 13px;
    margin-left: 10px;
    margin-right: 10px !important;
}

If I may suggest, try completely removing this CSS and just add the spacing through the padding instead.

Add it on .main-navigation .main-nav ul ul li a so instead of having the margins and this:

.main-navigation .main-nav ul ul li a {
    padding: 10px 13px 10px 13px;
}

Simply remove all the margins on .menu-item .menu-item-type-post_type and add this:

.main-navigation .main-nav ul ul li a {
    padding: 20px 13px;
}

And this is how it will look like: https://share.getcloudapp.com/7KupLqWX

Hi Elvin,

Its not a big thing.
But do think your team can add the sub-menu font size settings to the "Customizer" in a further version?

Thank you in advance.

Regards
Tom

But do think your team can add the sub-menu font size settings to the “Customizer” in a further version?

I'll forward this to Tom as a feature request. No problem. :)

Hi Elvin,

I'd like the submenu to look like this instead: https://mega.nz/file/qIAijRYb#3oiut7Cv_TI9WtBeDptgad2dMREoJOpZ6Ob4e3RLqxc

Hi Marc,

Can you open a new topic for this? So you could use the private information text field to link us to the page in question. Thanks.