Hello SiteOrigin team
We’re beginners… ;-)
Current / undesired state: Currently, the top menu is below the logo/banner image and the logo/banner image has a margin to the top and left border.
Goal: We would like the top logo/banner (1080 pixels wide, 122 pixels high) to be the backround of the menu on all pages. The menu should be entirely within the logo/banner image so that they look like a unity. No need for a further grey area around this. The menu should be on two lines, adjusted to the right in order not to touch the left hand side of the logo/banner, nicely distributed (centered vertically would be best). The two last items of the menu should be on the second line, but any other division of menu items between first and second line is fine also.
Hi Paola
Vantage might be able to do something sort of like this.
Appearance > Theme Settings > Layout, change the masthead layout to Logo in Menu.
Ideally, cut your logo out of the banner and add just the logo to Theme Settings > Logo.
Similarly, remove the logo from your background/banner image.
Add your banner/background image to the Media Library. Click on the image. Copy the URL from the right column.
Add the following to Appearance > Custom CSS:
/* Menu */ .site-navigation .full-container { background: url('http://full-image-url-goes-here.jpg'); background-repeat: no-repeat; background-size: 100%; }Replace my dummy URL with the correct image URL.
Hello
Thanks for the help so far. We tried and fiddled also with other snips of custom css here from the forum. We’ve now reached something we like more or less: http://www.psicologaonline.org/
However, we would like the menu to use only the 50% to the right of the masthead and be distributed neatly on two lines with even distance to top, bottom and between the two lines of menu. Maybe with a slightly smaller font.
Can you help? Thanks in advance! :-)
We do our best to help out with small CSS modifications. This is more complicated than one might think. We can take a quick look but after that you might need to seek the help of a developer.
Try the following:
/* Menu */ .menu-menu-container { text-align: right; } .menu-menu-container .menu { display: inline-block; max-width: 80%; }