[Theme: Twenty Twelve] Align site title with menu

How familiar are you with CSS?

Not very but I can learn

Generally to get things aside one another in CSS you’d float them left/right, for example:

header hgroup { float: left; }

.main-navigation { float: right; }

Then you may want to get rid of your margin top style on the navigation:

.main-navigation {
 float: right;
 margin: 0;
}

You’ll notice the line is no longer extended. This is the consequence of the float styles.

You can still achieve your line across the bottom by applying it to the element that wraps both the “hgroup” and “nav” elements, for example:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul { border: 0; }

.site-header {
 border-bottom: 1px solid black;
}

There is an issue with the line that is now added to “.site-header” and you can probably see it. The line does not go underneath the “hgroup” and “nav” elements, it sort of goes through them.

This is due to the float style again (blast you float!). Parent elements that have children elements that are floated do not understand their height anymore.

They need to be styled so that they understand their height. You can do this with a simple style of overflow hidden, for example:

.site-header {
 border: 1px solid black;
 overflow: hidden;
}

The proper way to do this would be not to use just overflow hidden and instead apply a “clearfix” class to the HTML element. The clearfix class would contain these styles: https://www.webtoolkit.info/css-clearfix.html , but that way you’ll need to create a Child Theme and it gets a bit too over-the-top.

Once you’ve made the parent element recognise its height properly, you can adjust the padding of it so that the border is not so far away. For example,

.site-header {
 border-bottom: 1px solid black;
 overflow: hidden;
 padding-bottom: 0;
}

Total CSS modifications:

header hgroup { float: left; }

.main-navigation {
 float: right;
 margin: 0;
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul { border: 0; }

.site-header {
 border-bottom: 1px solid black;
 overflow: hidden;
 padding-bottom: 0;
}

Where to put the CSS
In your Child Theme style.css file of course ?? !

For other readers: If you don’t have a Child Theme set up and you just want to make CSS modifications you can do so through this Custom CSS Manager plugin and use its section of the dashboard to hold them.

I’d like to center the title but keep the menu (home, sample page) to the right. Is this possible?

Try then expanding the width of your “hgroup” element and aligning its text (the “h1” element) to the right. For example,

header hgroup {
 width: 50%;
}

header hgroup h1 {
 text-align: right;
}

You can then see how much width you need to give it by the position of the text.

You may have to redo the width on different browser sizes if you want it centred there too.

Total CSS modifications:

header hgroup {
 float: left;
 width: 50%;
}

.main-navigation {
 float: right;
 margin: 0;
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul { border: 0; }

.site-header {
 border-bottom: 1px solid black;
 overflow: hidden;
 padding-bottom: 0;
}

header hgroup h1 {
 text-align: right;
}

By the way, you have some syntax errors in your Child Theme style.css file that are going to be problematic.

Remember that all CSS styles consist of the Selectors that point to HTML elements:

header hgroup

Then an opening curly brace:

{

Then your styles, which are paired by properties and values (in that order):

float: left;
width: 50%;

Then a closing curly brace:

}

https://www.w3schools.com/css/css_syntax.asp

You’re missing the closing curly brace on many occasions.

This is great help, thank you so much! I will go off now and edit my work. I am new to (properly) creating child themes and not editing the parent themes.

Also, when I viewed my source it looked practically messy. I couldn’t see my css file anywhere. Does that look normal to you?

Yes it’s normal, I too find it difficult to read the source of webpages when I right click and select ‘View source’.

I’m using Chrome’s built-in developer toolbar to help me identify a website’s underlying CSS and HTML structure. All I do is right click on the element I want to understand and select “Inspect element”. A new toolbar is shown that provides information on what CSS is applied to it and where it is in the HTML document.

There are alternative tools for other browsers, such as Firebug.

I just find Chrome’s tools more intuitive to use.

Sorry, here’s a better link for Chrome’s developer tools https://developers.google.com/chrome-developer-tools/

Oh no, I tried starting from scratch. I uploaded the .php files to my child theme and now it’s gone back to normal :'(

Thanks!

@andrew Nevins

I can’t quite seem to center the site title or put it on the same line as the menu –

Site link

What am I doing wrong? I took your advice (lots of curly }) but nothing seems to be working…

I’ve made a lot of progress since I last spoke to you tho! ??

Instead of this:

header nav {
 float: right;
 margin: 0;
}

Try this:

.main-navigation {
 float: right;
 margin: 0;
}

You also have too many closing curly braces here:

.entry-content,
.entry-summary {text-align:center;}

}

Amazing, it worked. Thank u! Why is it still not centered tho?

You can then see how much width you need to give it by the position of the text.

So you’ll need to adjust the width on the hgroup element until you feel it’s centred, but you need to follow that step where the title has a “text-align: right;” style too.

I’m really stuck. I’ve played around with both widths and the title moves only a nudge. :'(