Topic: logo and menu left – content right

Marjon Tas
March 13, 2025 at 7:59 am

I would like to achieve a lay-out that has the logo and menu in the left side and the content on the right side.
I have tried the option with the navigation in the left sidebar, but I would like to align the logo above the menu and the content on the right side of the page, directly on top of the page. How can I achieve this lay out?

Thanks for your support
Ying
March 13, 2025 at 9:20 am

Hi there,

Please check example 7:
https://docs.generatepress.com/article/header-examples/#example-7
Marjon Tas
March 14, 2025 at 12:01 am

Hi Ying,
Thanks, it does it more or less. I found out that I must choose float right for the navigation. A few additional questions.
– How can I make the text-align of the navigation left or right? It is now centerd by default.
– How can I exclude the homepage from this Lay out? (I have build for the homepage an header-element instead, and there I want to have the menu above. In this element I chose the option to combine nav and header. At this moment, with this element The navigation on the homepage does not work anymore. The links are not clickable)

Thanks for your support!

Ying

March 14, 2025 at 7:42 am

1. Try this CSS, if you want it to align right, change flex-start to flex-end.

.main-navigation .main-nav > ul {
  align-items: flex-start;
}

2. change the CSS to:

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

    body:not(.home) .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;
    }
	
    body:not(.home) .admin-bar .site-header {
        top: 32px;
    }
    body:not(.home) .site-header .main-navigation li {
	float: none;
    }
}
body:not(.home) .inside-header {
    flex: 1;
    flex-direction: column;
}
body:not(.home) .header-widget {
    order: 3;
    text-align: center;
}
body:not(.home) .nav-float-right .inside-header .main-navigation {
    order: 2;
    margin-top: 50px;
    margin-bottom: 50px;
}

body:not(.home) .dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

body:not(.home) .main-navigation .main-nav>ul {
    flex-direction: column;
}

body:not(.home) .nav-float-right .header-widget {
    margin-left: 0;
}

body:not(.home) .nav-float-right .header-widget .widget {
    margin-bottom: 50px;
}

body:not(.home) .nav-float-right #site-navigation {
    margin-right: auto;
}

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

logo and menu left – content right