Archived topic
Sticky Menu block width
3 replies · Started by n52 on May 9, 2016
Hi
How to make block width adapt to content?
for example I have "types of menu" menu item
then I have "the menu that allow you come in" label in submenu
and then I have "come in 1" "come in 2" "come in 3"sub-sub-menu items
as a result I have dropdown item called "the menu that allow you come in" with ">" symbol which lay on 4 lines instead of 1 long wide line. How to fix it?
You can increase the width of the sub-menu with this CSS:
.main-navigation ul ul {
width: 200px;
}Adjust as needed :)
Adding CSS: https://generatepress.com/knowledgebase/adding-css/
Ok, thx!
And what to do if I need different width for different sections?
In menu width depends on content.
For example: "types of menu" and "help" have different width in menu
but "types of menu 1" "types of menu 2" "types of menu 3" "types of menu 4"
have the same width with "help 1" "help 2" "help 3" as block of submenu
In my mind it looks like
.main-navigation ul {
min-width: 200px;
max-width: 400px;
}And how to make submenu width depends on content?
Currently it can't depend on the content, you have to do it manually.
You can add a class to the parent item like this: https://generatepress.com/knowledgebase/using-menus/#custom-classes
Then do this:
.main-navigation ul .my-class ul {
width: 200px;
}
.main-navigation ul .my-other-class ul {
width: 200px;
}