[Lee Ann]

This is great! How do we get the sub-menu to be lower as well? Thanks!

[Theme Horse Support Team]

Hi Lee Ann,

Sorry! What you are trying to say? Can you please clarify it more?

Thank you!

[Lee Ann]

I was responding to the original post: https://www.themehorse.com/support-forum/topic/change-height-of-primary-menu-container/

I entered your code to change the height of the primary horizontal menu.

#access a {
height: 45px;
padding-top: 25px;
}
.search-toggle {
margin-top: 25px;
}
#site-logo {
margin-top: 18px;
}
#access ul li ul {
top: 70px;
}

@media only screen and (max-width: 767px) {
#site-logo {
margin: 10px 0;
}
.menu-toggle {
margin-top: 17px;
}
}

BUT – now the mobile menu is super spaced out. How can I fix this? Here is all of the Custom CSS I have:

#access a {
height: 45px;
padding-top: 95px;
}
.search-toggle {
margin-top: 25px;
padding-top: 70px;
}
#site-logo {
margin-top: 18px;
}
#access ul li ul {
top: 70px;
}

@media only screen and (max-width: 767px) {
#site-logo {
margin: 10px 0;
}
.menu-toggle {
margin-top: 17px;
}
}
#access ul li ul {
top: 120px;
}
hr{
padding: 5px;
margin: 0px;
margin-top:-1em;
}

[Theme Horse Support Team]

Hi Lee,

Please go to the Appearance > Customizing > Layout Options > Responsive Layout and ON the responsive layout and just paste the below code in custom CSS and remove your all code:

#access a {
    height: 45px;
    padding-top: 25px;
}
.search-toggle {
    margin-top: 25px;
}
#site-logo {
    margin-top: 18px;
}
#access ul li ul {
    top: 70px;
}
@media only screen and (max-width: 767px) {
    #site-logo {
        margin: 10px 0;
    }
    .menu-toggle {
        margin-top: 17px;
    }
}

Thank you!

[Lee Ann]

Thank you for your response, however, this does not fix my problem. The reason I have that code the way it is, is because we don’t want our menu at the top of the page, we want it closer to the line and the sub-menu items to show up right below the menu items when hovered over, which is what I did. The problem is that it is messing up the spacing on the (already turned on) responsive design on a phone. Is there a way to just fix the CSS for the phone?

Thank you!

[Theme Horse Support Team]

Hi Lee,

Could you please provide us the site URL? So that we can see your site in mobile devices and provide you a exact CSS code.

Thank you!

[Lee Ann]

http://thelangcompanies.com/

[Theme Horse Support Team]

Hi Lee,

Thank you for the site URL.
Edit your custom CSS accordingly to the below one:

#access a {
    height: 81px;
    padding-top: 65px;
}
.search-toggle {
    margin-top: 25px;
}
#search-box {
    top: 100px;
}

@media only screen and (max-width: 767px) {
	.menu-toggle {
		margin-top: 57px;
	}
	#access a {
		float: none;
		padding: 10px 0;
		height: inherit;
	}
}

Thank you!

[Lee Ann]

From that I updated some of the code and it has been fixed. Thank you!!

[Theme Horse Support Team]

That’s great Lee Ann

Thank you!

[Author]

Posts