Hi,
I could take a look, that could be done by reducing the padding between the menu items. Also note that the header menu space can be stretched if you have many menu items
– https://www.screencast.com/t/fUvNlIdZ4Gj
Thanks
Thank you for the reply!
Well this thing is driving me nuts! I know I can stretch it, and in my print screen it is.
My problem is when the width of the browser decreases, (from the user maximizing or shrinking his browser) it gets even uglier! At the point of having 3 lines for the menu until it finally transforms to the iPad layout.
What it should do is, decrease the space between each button, and when not possible to shrink more, hide the furder right buttons. And never show a main menu with more than one line.
Is there anyway of achieving such a thing?
When there is no more space as the screen gets narrower, the menu items will be displayed in 2, 3 or more rows.
Provide a link to your website and I will try to decrease the padding between the menu items, if needed also reduce the font size below certain widths for a better result.
It´s this http://www.labor.pt
At this point I´ve managed to at least when you are in the top of the page it does´t happen.
But when you scroll the menu appears with two or more lines.
Try this code in Theme panel here – https://www.screencast.com/t/VgCCdfPPWG
– https://www.screencast.com/t/cXWU44QT0y
.sf-menu > li > a {
padding: 0;
}
See if it works for you.
Amazing! Perfect!
Now it´s only missing when I scroll down and the menu stays on top.
When sticky the logo is also displayed before the menu, so the space is limited even more. You could disable the logo when sticky
– https://www.screencast.com/t/GzhYYYJVgEcP
There would be no room to display the logo and the menu on the same line when sticky, no matter what padding I remove or lower.
What about stretching the menu and making the content centered? Is it possible?
I see you stretched it, it could be centered now like this
– https://www.screencast.com/t/GMMxoFgZLhz
– https://www.screencast.com/t/iwV298SMG
@media (min-width: 768px) {
.td_stretch_content .td-container {
text-align: center;
}}
@media (min-width: 768px) {
.td-affix #td-header-menu {
display: inline-block;
}}
But the same will happen on smaller devices. That code can be entered in the normal custom CSS, not advanced if it is of any use to you.
