Menu and header layout

Rather than try to do it for you, the best way of learning is to investigate how that has been done.

And this Snippet tells you about Firebug which will enable you to inspect that html/css code.

There are other snippets around the Header which should also help.

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!

Do come back if you’re stuck.

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.

I’m currently writing a Navbar Guide which you can look at work-in-progress here.

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
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 coding

Site looks great!

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 coding seems to have worked fine. Thanks for the tip.

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.

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.

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 thing I need to play with, or is it a result of the negative top value?

If you look at the draft Navbar Guide, you’ll see that gap discussed. It is @media if happening on iPad, its a height issue.

Also shows you that you need to use -ve values.

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!