Title: Menu and header layout
Last modified: August 21, 2016

---

# Menu and header layout

 *  Resolved [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [12 years ago](https://wordpress.org/support/topic/menu-and-header-layout/)
 * Hi guys, very new to this website building thing. I have searched through the
   forums picking up things as I go along and managed to tweak quite a few things
   so far. Hoping someone can help with a few things.
 * My website is [http://www.leafrootfruit.com.au](http://www.leafrootfruit.com.au)
   and I’d like to rearrange the header and menu so that it is similar in layout
   to this website that I came across earlier: [http://www.creermonsitepro.fr/](http://www.creermonsitepro.fr/)
 * Specifically I’d like to:
    – Move the menu to the right and put those “tab”(?)
   boxes around them – Switch the tag line and the social media icons around
 * Thanks

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933328)
 * Rather than try to do it for you, the best way of learning is to investigate 
   how that has been done.
 * And this [Snippet ](http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/)
   tells you about Firebug which will enable you to inspect that html/css code.
 * There are other [snippets ](http://www.themesandco.com/?s=header)around the Header
   which should also help.
 *  Thread Starter [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [12 years ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933356)
 * Ok, thanks. I already had Firebug installed, but wasn’t quite sure how to translate
   it into code. Now I’ve watched the video and I understand how I can inspect elements
   etc. I’ve even managed to work out three parts of code to add to my style css
   file, but that was more trial and error, cutting and pasting code than anything
   if I’m to be honest. I’ll keep playing around in the next few days and report
   back on how I get on!
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933360)
 * Do come back if you’re stuck.
 *  Thread Starter [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933477)
 * ok, I’m nearly there (I think)! However, in all my coding, the whole header section
   now seems very spaced out vertically. I’d like to squish it all back together
   so that the tagline and the menu are on the same row and to remove a lot of the
   white void.
 * Also, the little borders around the individual menu tabs now show up on mobile
   devices. I’d prefer them not to appear on smaller devices and only have them 
   on larger screens.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933479)
 * I’m currently writing a Navbar Guide which you can look at work-in-progress [here](http://customizr.rdellwebworks.co.uk/navbar-guide/).
 * > Positioning the Navbar Box
 *  shows the properties needed (position, top, left). You need to identify the 
   correct selectors for the tagline and navbar by using the [CSS Glossary](http://www.themesandco.com/customizr/css-glossary-for-the-customizr-wordpress-theme/)
   
   So you’ll end up with:
 *     ```
       .selector {
       position: relative;
       top: 0px
       left: 0%;}
       ```
   
 * > Adjusting the white space between the colored & grey bars
 *  shows how to reduce the header whitespace.
 * To suppress the borders on smaller viewports, you need to use @[media ](http://www.themesandco.com/snippet/media-queries-responsiveness/)
   coding
 * Site looks great!
 *  Thread Starter [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933504)
 * Thank you so much for you help and patience.
 * I think I understand what you’re suggesting, but I’m going around in circles.
   I’ve tried adding in all manner of selectors into the code you’ve supplied and
   nothing seems to make a difference. Do I need to change the values also? I’m 
   still struggling to identify when to use certain selectors (eg `.inside .site-
   description` vs `h2.site-description` vs `.navbar-wrapper .navbar h2`) and generally
   resort to trial and error until I get the right one.
 * I even tried playing around with negative margins for the various elements, but
   that played havoc with the responsiveness!
 * [@media](https://wordpress.org/support/users/media/) coding seems to have worked
   fine. Thanks for the tip.
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933505)
 * It’s all about specificity (google it — not at desk, so it’s not easy for me 
   to give links) In many situations, lots of combinations of selectors will work,
   but you need to pick one that is specific enough to override what’s been set 
   in the theme stylesheet.
 * I havve found that generally Firebug comes to the rescue here: select the element
   you want to style and put your mouse in the right hand pane–over the styles that
   have been set for it. Then right-click and select “Add rule”. The selector is
   chosen for you and if you press enter you can add styles live (no one else will
   see them, of course–this is between you and your browser) but I have always found
   that the rule that Firebug chooses is very specific and will generally (always?)
   override the others that have been set. Try it and see if this helps.
 * We’ve all been there: I remember flailing around trying to make things work until
   I understood specificity. Google css specificty in images: there are some good
   charts around that explain it.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933509)
 * I’m sorry, I should have explained that the 0px/0% were the default positions
   and yes, you were intended to change them to fit your customization.
 *  Thread Starter [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933531)
 * Aha, Awesome! That’s making things happen now. Thanks guys.
 * I don’t know if I’m breaking some css coding rule, but I used the following code
   for the navbar:
 *     ```
       .navbar {
       position: relative;
       top: -160px;
       left: 0%;}
       ```
   
 * Is there anything wrong with using a negative value?
 * There is a gap between the menu and the grey bar when I view it on an ipad landscape
   during responsive design testing. Is that an [@media](https://wordpress.org/support/users/media/)
   thing I need to play with, or is it a result of the negative `top` value?
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933533)
 * If you look at the draft [Navbar Guide](http://customizr.rdellwebworks.co.uk/navbar-guide/),
   you’ll see that gap discussed. It is @[media ](http://www.themesandco.com/snippet/media-queries-responsiveness/)
   if happening on iPad, its a height issue.
 * Also shows you that you need to use -ve values.
 *  Thread Starter [dunks80](https://wordpress.org/support/users/dunks80/)
 * (@dunks80)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933545)
 * I ended up just removing the borders around the menu items. Thank you so much
   for your help with getting the header sorted, I’m very happy with it now!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Menu and header layout’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [heading](https://wordpress.org/support/topic-tag/heading/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/)

 * 11 replies
 * 3 participants
 * Last reply from: [dunks80](https://wordpress.org/support/users/dunks80/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/menu-and-header-layout/#post-4933545)
 * Status: resolved