Nav menu spacing

Resolved Lori Schroeder
(@lswebs)

6 years, 2 months ago

My nav menu was going on to 2 lines, so I added custom CSS below per a previous post on this forum. My problem now is that the menu items are too close together. Also “Posts” is lower than the rest, and the dropdowns underneath it are not wide enough.

@media screen and (min-width: 880px) {
.main-navigation,
.main-navigation div > ul:first-child,
.main-navigation div > ul {
display: inline-block;
margin-bottom: 10px;
width: auto;
}
.main-navigation ul > li,
.main-navigation ul > li a {
display: inline-block;
}
}

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

(@jarretc)

I would remove what you added and try out the following

@media screen and (min-width: 800px) {
	.main-navigation {
		float: right;
		width: auto !important;
	}
    .main-navigation ul.nav-menu {
    	width: auto !important;
    }
	.main-navigation ul li {
		display: inline-block !important;
		width: auto;
	}
	.main-navigation .menu-menu-container > ul:not(.nav-menu) {
	    width: 0px;
	}
	.main-navigation .astm-search-menu a {
		padding-top: 0px;
	}
}

Thread Starter

Lori Schroeder

(@lswebs)

6 years, 1 month ago

Thanks for your assistance. With some margins I was able to get it to look good. One more question…how can I remove the bullet dashes on the dropdowns? Artist Places, DIY, etc.

Jarret

(@jarretc)

6 years, 1 month ago

Hello again, the following CSS should handle that

.main-navigation ul .sub-menu ::before {
	display: none;
}

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Nav menu spacing’ is closed to new replies.