Can I have a Top level menu item over two lines? I have inserted a < br > into the title in the menu settings – but it drops the second line down by 116px just to a line height issue that i cant seem to override.
Sorry, here: http://bit.ly/fnBvql
Hey!
I’m sorry but can you please post a screenshot of what you’re trying to do? You can use imgur, dropbox, mediafire to post the image here.
Cheers!
Ismael
Hi there,
I have attached a screenshot of what i am trying to do. I just want the menu titles to be on two lines are they are quite long titles.
Cheers
it seems as if the html tags are stripped out in the menus, tried to have the menu items in two lines, too – without success.
Hi!
You can do something like this. Edit the menu item then change the “Navigation Label” to something like this:
Online Print <span class="menu-second-line">and Content Writing</span>
Add this on your custom.css or Quick CSS:
.menu-second-line {
clear: both;
display: block;
position: relative;
top: -70px;
}
Best regards,
Ismael
Isn’t there a custom walker, so that HTML works in menu items in general?
Hi!
Your two options are what Ismael posted above or adding a class to the menu item that shrinks its width and forces it to a second line (though that still not look great).
If you wanted to implement something else you could.
Cheers!
Devin
Hello,
Not sure if it’ll work in every case, but you can try following (and still preserve nice look during header scrolling):
1. In Menu Item -> Navigation Label enter
<span class=”menu_first_line”>Text-1</span><span class=”menu_second_line”>Text-2</span>
2. in custom.css enter
.menu_first_line {
display: block;
float: left;
}
.menu_second_line{
display: block;
float: left;
margin-top: 15px;
position: absolute;
}
#mobile-advanced .menu_first_line {
float: none;
display: inline;
}
#mobile-advanced .menu_second_line {
display: inline;
float: none;
margin-left: 4px;
margin-top: 0;
position: relative;
}