[Resolved] Main menu and logo in sidebar

[Davide]

Hi! I’m trying to create a website with primary navigation in sidebar. I made it using the theme customizer (customize-layout-primary navigation-navigation location-left sidebar).

I have 2 problems:
1) I’d like to change the position of navigation logo in the left sidebar (align: left, center and right), but I don’t know how to figure it out using CSS.
2) I’d like that in mobile version of the site, the burger icon and the logo was in the center of the screen one over the other (right now the logo is on the left size and the burger mneù on he right side of the screen).

Does anybody know how to help me?

Thanks, guys!

[David]

To align the logo left try:

.gen-sidebar-nav .main-navigation .navigation-logo img {
	margin-left: 0;
}

Just switch the property to margin-right: 0; for align right.

To stack the logo and hamburger on mobile you can try this:

@media (max-width: 768px) {
	.inside-navigation {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

[Davide]

Hey, David! Thanks! Everything works exactly as I wanted!

Only one last problem: on mobile version of the site, site logo is very very tiny! Any way to change its size on mobile?

[David]

You can update the media query rule i gave you to include this, adjust to px’s to suit:

@media (max-width: 768px) {
	.inside-navigation {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.header-image {
	    height: 100px !important;
	}
}

[Davide]

This did the trick!

Thanks, David!

[David]

Great news. Have a good day!

[Author]

Posts