[valelotartaro]

Hello,
The menu in screens of 11′ and below is shown in two rows . Is there a way that it gets smaller in those screens so that it shows everything in one row? Or to show in those screens the modern menu format while in bigger screens it shows the classic format? Or to use a different logo in smaller screens?
The url is http://162.243.63.85
Kind regards, Valeria

[Skandha]

@valelotartaro: For that
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:1024px) and (max-width:1192px) {
	.site-branding {
		padding:0;
	}
	.navigation-classic .site-navigation a {
		padding:26px 16px;
	}
}

Let me know if resolves the issue.
Kind Regards,
Skandha

[valelotartaro]

Hello Skandha, this didn’t work. Is there a way to make the logo smaller in those screens? I am checking in a Macbook air 11′ and the menu gets distorted because the logo is big (2 rows). However in a macbook 13′ it’s perfect (all in one row), or if I put the zoom in the mac 11′ at 90% it is also in one row.
Looking forward for your very helpful answers,
Kind regards, Valeria

[Skandha]

@valelotartaro: Can you please attach me a screenshot a where the menu is getting distorted?

Kind Regards,
Skandha

[valelotartaro]

How do I attach the screenshot?

[Skandha]

@valelotartaro: You can upload the image in Dropbox or similar kind of workspace and then post the link here.

Kind Regards,
Skandha

[valelotartaro]

Tell me if you can sse it:

https://drive.google.com/open?id=11bmmVHItz6iE-pdh7o5kkulnLhKxN-YD
Here the navigation bar is is two rows (one with the logo and the other with the menu) with Macbook Air ’11

However if I put the zoom in 90% everything is in one row, and that is how I want it to be always. Is there a way to set that if screens are ’11 the navigation bar and logo shrinks to 90%? (https://drive.google.com/open?id=1BDlTTR4p9jEovE8ouwEBhHKbqFJwaLg8)

Kind regards, Valeria

[Skandha]

@valelotartaro: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:1024px) and (max-width:1212px) {
	.navigation-classic #header-wrapper:not(.header-top) .site-navigation a {
		padding:26px 15px;
	}
}

Let me know if this resolves the issue.
Kind Regards,
Skandha

[valelotartaro]

Thank you! It works in all the pages except home. The url is https://bodegahcanale.com
Kind regards, Valeria

[Skandha]

@valelotartaro: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:1024px) and (max-width:1224px) {
	.navigation-classic .site-navigation a {
		padding:26px 10px;
	}	
}

Let me know if this works out!
Kind Regards,
Skandha

[valelotartaro]

Perfect : )) Thank you!!

[Skandha]

@valelotartaro: Glad I could help you out. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts