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:has(#wpadminbar):not(.home) .site-header {
        top: 32px;
    }
    body:not(.home) .site-header .main-navigation li {
	float: none;
    }

body:not(.home) .inside-header {
    flex: 1;
    flex-direction: column;
    padding-top:100px;
}
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;
}
}

Marjon Tas
March 18, 2025 at 3:08 am

Hi Ying,

Thanks, that works for the homepage.
What does not work on the leftside menu is:
1. The margin top above the logo in the left sidebar has gone. With the other css it was there. How can I best solve this?
2. I centert the menu to the leftside of the left sidebar but it begins halfway the column.
3. I would like to be able to centre the logo in this column. Is that possible?

I made a useraccount for you to look into the website. See below.
Thanks!
Ying
March 18, 2025 at 9:25 am

I’ve updated the CSS on your site. Please check.
Marjon Tas
March 18, 2025 at 1:43 pm

Hi Ying,
That looks much better thank you. On tablet/mobile however, there is a big empty space between the hamburgermenu and the content. I would like the hamburger menu in on the right side of the logo. And the logo (like it is now allready) as big as possible for the space there is.
Sorry I have to ask, but now with this menu on the left side, there are things happening that are unexpected for me. Thanks for your support.
Ying
March 18, 2025 at 2:28 pm

A bracket was in the wrong place, it seems to be fixed now, please check.
Marjon Tas
March 20, 2025 at 12:33 am

Yes, it is fixed now! Thanks al lot!
Ying
March 20, 2025 at 8:50 am

You are welcome 🙂

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

logo and menu left – content right