Hi,
I’ld like to have my logo in the menu but would also like to have the header displayed so I can put a second menu thanks to a widget.
I want to have a final look close to this one: www.redbull.com (logo in menu, and second menu in the header/top nav section).
Here is my website: www.getsharp.eu
I tryed to custom the CSS to display the header, without success.
Here is what I typed:
element.style {
display: block;
}
header#masthead hgroup {
display: block;
}
I have no actual knowledge of CSS and I just tryed to guess, helped with Firebug.
Thank you very much for your help,
Justin
Hi Nitsuj.
We’d love to help you roll this out, it is however well into the territory of custom development which we don’t offer at this time. If you’re interested in implementing a double header like the Red Bull site we recommend getting a quick estimate from the pro’s over at http://codeable.io/. It’s not a massive job so it’s worth getting an estimate to begin with.
Sorry I don’t have more.
[Solved]
Hi Andrew,
I’ve found a solution to my problem. It may not be the best solution but as long as it is displayed well I’m fine with it.
I’ve decided to share it with you in case someone wants to do the same as I did.
So I tried to create a child Theme and mess around with style.css, functions.php & header.php.
Thanks to this guide : http://codex.wordpress.org/Navigation_Menus
I believe it is doable but you need to be familiar with writing php. I tried, failed and decided to go another way.
Here is what I did.
I went to my Theme settings and disabled the logo and chose the Default Masthead as Header.
I created my header menu under Apearence>menu
I then went to Apearence>widget and added a menu widget to the header and selected the later created menu.
Under custom CSS, I wrote:
/*This line to delete the name of my website which was displayed by default when there is no logo */
header#masthead hgroup h1 {
display:none;
}
/* This line to reduce the header’s size*/
header#masthead hgroup {
padding-bottom: 0;
padding-top: 30px;
position: relative;
}
/* and this to align my menu where I wanted it to be */
header#masthead hgroup #header-sidebar {
-moz-box-align: center;
-moz-box-pack: center;
box-sizing: border-box;
display: -moz-box;
height: 100%;
padding-bottom: 0;
padding-top: 0;
position: absolute;
right: 0;
top: 0;
}
Then I incorporated the logo in the main menu by instaling a plugin called: Nav menu plugin (http://wordpress.org/plugins/nav-menu-images/)
Then I uploaded an adjusted logo so it fits well in the menu.
I still have to trick around to make it look good, but at least I had somehow a logo in a menu with a top menu in the header.
Hope this could help someone.
Super, glad you found a solution here. Thanks for sharing, much appreciated!