Sider Theme: Make Nav Menu Horizontal?

[Paul]

I built a site for a client several years ago using the Sider theme. The primary navigation menu is positioned on the left-hand side.

But now the client wants a standard horizontal menu instead. Is there any easy way to do this without a ton of CSS re-working?

[Leo]

Hi there,

That layout is actually created with CSS so you would need to delete the CSS that makes the vertical menu.

Try removing this part:

@media (min-width: 1000px) {
	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.site-branding,
.site-logo {
	order: 1;
}

.header-widget {
	order: 3;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 30px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thanks Leo. After looking at it further, that’s what I figured. I did that, now just need to make a few more tweaks on the nav logo. Cheers!

[Leo]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts