Megamenu organization
Hi!
I would like to change the menu a little bit. I would like that the Languages "Idioma" and the search icon will be placed on the top bar on the right, next to "Customer Portal" and "Registrarse". How can I do this?
Also, I would like to reduce the height of the menú.
Please can you help me?
Thanks in advance.
Comments
Hello,
To achieve that, you can use the Header Builder plugin.
To learn more about this tool, please, check the following video tutorial.
https://support.muffingroup.com/video-tutorials/how-to-build-a-custom-header/
Thanks
Hello Phil,
I've tried the Header Builder plugin, but it doesn't allow me to reduce the first line of the header. I think if I could reduce it, our logo would be center in the height. Also with this plugin the idioms field looks worse.
Have you got another idea to change the height of the header? I've already tried in Betheme > theme options > header, but I couldn't change it.
As you can see, now our logo is on the botton of the header, because the first line of the header is big:
Thank you.
Did you try to move your logo to the Action Bar row?
You can also change the height of this row by clicking on the pencil icon.
If you do not want to use the Header Builder, you can try to reduce the header's height by setting the Vertical Padding to zero in Betheme -> Theme options -> Global -> Logo.
Thanks
Hello Phil,
Yes, I've tried to move the logo to the action bar, but the blank space is now down the logo. I've also tried to reduce the height of the rows to the minimum but they are still too high. And I've also tried to setting the Vertical Padding (with Header Builder plugin inactive) but even with 0px it is not the solution.
I can see that the organization of this menu is like with boxes, and we only can place the logo or in the first box or in the second, so the solution could be if we integrate both boxes for logo in only one, could it be?
Thank you.
Please, try to turn on the Overflow logo option and set the Height to suit the display on the website.
Thanks
Hello Phil,
Thank you, we got it!
The only problem now is that the idioms menu is not displaying like before. I'll check it, but if you know how to leave it like before, but using Healder builder, let me know, please:
Before without Header Builder:
After with Header Builder:
Thanks.
Hello again, Phil,
I have another issue for using Header builder: when we used to click in "products" it used to display in 3 columns, but now it displays in 1 column. I've tried to include CSS code to fix it, and "products" is now with some columns but the other sections changed to be wider. Please, do you know what CSS code we should include?
This is the code that I've used:
.sub-menu {
width: 410px;
}
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li {
clear: initial;
float: left;
width: 50%;
}
Thank you.
Are you able to send me a link to your website?
I would like to take a closer look at it and the source of your website.
Thanks
Hi Phil,
I'm sorry but it's offline now and I cannot give you the passwords. The URL is the following: https://dev.moreda.com/
1) Please try to create a new menu with idioms and use a menu item instead of the text item.
2) In that case, you should contact your web developer because as long as Header Builder does not support the Mega Menu, you will need to modify theme/plugin files or prepare more advanced custom CSS.
Thanks
Hello,
1) I've just tried, but it still displays like before. Any other idea?
Please, add these items as submenu items.
Thanks
Hello Phil,
That's it, but another problem now: the menu "IDIOMA" is behind the menu "CONÓCENOS", so it is not possible to click in any idiom. How could I put the menu idioma fore the menu conócenos?
Thank you.
Please, try to use the following CSS code:
.action-bar .menu-item .sub-menu{ z-index: 1!important; } .first-row .mhb-menu{ z-index: 0!important; }Thanks
Hello Phil,
Many thanks, it works!
I just need now display "productos" in 3 columns instead 1, and keeping the other sections in only 1 column. I'll try changing the CSS code, if you have another idea please let me know.
Kind regards.
The only option to have 3 columns in the submenu without advanced CSS/modifying theme files would be using a Mega Menu, but unfortunately, this feature does not work with Header Builder.
Best regards