[Resolved] Menu on the left

[Matthieu]

Hello, is it possible on the example n°7 of the generate press documentation: https://docs.generatepress.com/article/header-examples/
to manage the left alignment of the elements rather than the center? (Title / logo, pages, social network icons …)

Thanks

[Elvin]

Hi there,

It’s defintely possible with a bit of editing on the CSS.

If you can link us to the page in question to see what you currently have, we can inspect the page and help you out with the CSS writeup.

Let us know. 🙂

[Matthieu]

Hello, thank you for your answer. I followed the generatepress documentation to have the same rendering as example # 7 available here: https://docs.generatepress.com/article/header-examples/

Thanks 😃

[Leo]

Hi Matthieu,

Edit this CSS:

.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;
}

to this:

.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;
    display: flex;
}

Then add this instead the same @media (min-width: 1000px) {

.inside-header {
    margin-top: auto;
    margin-bottom: auto;
}

[Matthieu]

Hello, thank you for your answer. I may have explained myself badly, I would like the logo, the pages “Home / Blog / contact” as well as the social networks to be justified on the left.😀

Thanks

[Leo]

Ahh I see.

Try this instead first:

@media (min-width: 1000px) {
    .inside-header {
        align-items: flex-start;
    }
    .nav-float-right #site-navigation {
        margin-left: 0;
    }
}

[Matthieu]

Hello, I modified the part: @media (min-width: 1000px) {
.inside-header {
align-items: flex-start;
}
.nav-float-right # site-navigation {
margin-left: 0;
}

The logo aligns to the left as expected but not for the “Home / contact / blog” pages or the icons of social networks I have the impression.

Thanks

[Matthieu]

The other concern from what I see is that the content of the page is displayed as if the side menu bar does not exist…

You can see that the content is not centered on the page compared to the navigation bar on the left.

[Ying]

The other concern from what I see is that the content of the page is displayed as if the side menu bar does not exist…

Did you forget to add this css from the documentation?

 body {
    padding: 0 50px 50px;
    margin-left: 300px;
}

And you could disable the sidebar if you are not using it 🙂

To align header to left, try this CSS, they need to be added under the media query:

.main-navigation .main-nav ul li a {
    padding-left: 0;
}
.main-navigation .main-nav ul li {
    margin-right: auto;
}
.header-widget li a {
    padding-left: 0;
}

[Matthieu]

Thank you for your reply. It’s good for the alignment of the pages and the logo! On the other hand for the icons of social networks always not. I have the impression that they are centered.
I disabled the side columns, this to solve the display problem.

– How to remove the gray bar between the side menu and the content? (To have less margin between the two)
– How to make social network icons in the menu when browsing tablet and mobile? Currently the icons are outside the navigation bar and I see that there is a big gap between the two 😅

Thanks !

[Ying]

You didn’t add the CSS into the media query, let’s try it again:

Delete the ones I provided before, and add this:

@media (min-width: 1000px) {
    .main-navigation .main-nav ul li a {
        padding-left: 0;
    }
    .main-navigation .main-nav ul li {
        margin-right: auto;
    }
    .lsi-social-icons li a {
        padding: 0;
    }
}

Then I’ll take another look 🙂

– How to remove the gray

You could try increase the container width at customizer > layout > container.

– How to make social network icons in the menu when browsing tablet and mobile?

The entire header will be hidden in mobile and tablet, you could try to add social icons as menu bar item using hook element or block element. This topic should help:
https://generatepress.com/forums/topic/social-media-menue-in-navigation/#post-1611451

After they are added, you need to give them a class: hide-on-desktop so that they only appears in tablet and mobile.

[Matthieu]

Thank you for your reply. I added the css you just gave me, the result is not the right one I have the impression.

In the css customizer, I added exactly this:

@media (min-width: 1000px) {
.main-navigation .main-nav ul li a {
padding-left: 0;
}
.main-navigation .main-nav ul li {
margin-right: auto;
}
.lsi-social-icons li a {
padding: 0;
}
}

.main-navigation .main-nav ul li a {
padding-left: 0;
}
.main-navigation .main-nav ul li {
margin-right: auto;
}
.header-widget li a {
padding-left: 0;
}

.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;
display: flex;
}

.admin-bar .site-header {
top: 32px;
}
.site-header .main-navigation li {
float: none;
}
}
.inside-header {
flex: 1;
flex-direction: column;
}
.header-widget {
order: 3;
text-align: center;
}
.nav-float-right .inside-header .main-navigation {
order: 2;
margin-top: 50px;
margin-bottom: 50px;
}

.dropdown-click .site-header .main-navigation ul ul {
position: relative;
}

.main-navigation .main-nav>ul {
flex-direction: column;
}

.nav-float-right .header-widget {
margin-left: 0;
}

.nav-float-right .header-widget .widget {
margin-bottom: 50px;
}

.nav-float-right #site-navigation {
margin-right: auto;
}

[Ying]

You shouldn’t have to touch the CSS you’ve done before.

The ones I asked you to deleted is the second CSS from what I provided here:https://generatepress.com/forums/topic/menu-on-the-left-2/#post-1683814

Then add the CSS from here:
https://generatepress.com/forums/topic/menu-on-the-left-2/#post-1683851

Or just replace your current CSS with this:

.site-header {
	position: sticky;
	top: 0;
	 z-index: 100;
}
@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 {
  flex: 1;
  flex-direction: column;
}

.header-widget {
	order: 3;
	text-align: center;
}

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

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation .main-nav>ul {
    flex-direction: column;
}

.nav-float-right .header-widget {
    margin-left: 0;
}

.nav-float-right .header-widget .widget {
    margin-bottom: 50px;
}

.nav-float-right #site-navigation {
    margin-right: auto;
}

@media (min-width: 1000px) {
    .main-navigation .main-nav ul li a {
        padding-left: 0;
    }
    .main-navigation .main-nav ul li {
        margin-right: auto;
    }
    .lsi-social-icons li a {
        padding: 0 !important;
    }
	 .inside-header {
        align-items: flex-start;
    }
    .nav-float-right #site-navigation {
        margin-left: 0;
    }
}

[Matthieu]

– I replaced my css with the one you gave me the alignment is fine! On the other hand, the gray bar between the side menu and the content to reappear …😅

– A css solution to get the logo down? A top margin can be ?

– For the appearance of the menu, is it possible to get it only on computer ? For the tablet and mobile version I would use a more suitable method.

Thank’s so much for your help and patience 😃

[Ying]

1. Replace your current CSS with this, I changed media query a little bit.

.site-header {
	position: sticky;
	top: 0;
	 z-index: 100;
}
@media (min-width: 1000px) {
	body {
		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;
	}

.main-navigation .main-nav ul li a {
        padding-left: 0;
    }
.main-navigation .main-nav ul li {
        margin-right: auto;
    }
.lsi-social-icons li a {
        padding: 0 !important;
    }
.inside-header {
        align-items: flex-start;
    }
.nav-float-right #site-navigation {
        margin-left: 0;
    }

.inside-header {
  flex: 1;
  flex-direction: column;
}

.header-widget {
	order: 3;
	text-align: center;
}

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

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation .main-nav>ul {
    flex-direction: column;
}

.nav-float-right .header-widget {
    margin-left: 0;
}

.nav-float-right .header-widget .widget {
    margin-bottom: 50px;
}

.nav-float-right #site-navigation {
    margin-right: auto;
}
}

@media (max-width: 999px) {
	aside#lsi_widget-1 ul li {
    margin-bottom: 0 !important;
}
}

2. For logo location, go to Customizing > Layout > Header, in crease the Top Header Padding.

3. For the “grey bar”, go to Customizing > Layout > Container, increse the Container Width.

Let me know how it works 🙂

[Author]

Posts