This header is what it needs to look like but I know it's not proper. I can't select the H2 tagline text and it's all over the place on the iPhone. Should I avoid absolute positioning? Should I put new divs above the hgroup or inside?
Generally, we read left to right and from top to bottom (excepting, of course, those that don't) but that generality is fundamental to, say, websites in English.
As such, we should try to structure our HTML in the same way. If your logo/hgroup is top-left it should come before anything else in your HTML...and so on.
That way there is little need to move things about with absolute &/or relative positioning.
Hey jk,
I noticed a couple of things that are causing your issue
You are using clear:both; on the search form and on all h1 tags.
But then you are overwriting the clear:both using positioning attributes
This will be a never ending battle when building a responsive site and a lot of unnecessary CSS
I would recommend that you
Remove position attributes from all elements in your header
Look at using clear:right on search from instead of clear:both
Remove the clear:both from h1 and h2 tags
Re-position elements using margin and padding
* Side note I would look at removing the clear:both from your h1, h2,h3, h4, h5, h6 elements and create a class that you call only when you need to use the clear:both attribute.
If this does not work for you try putting the code in Codepen an leaving us a link here.
As for the height I need on the header, should I set a height to something like hgroup, #branding, or #header? Or just use the margins on the elements to push the height?
Also, if you inspect the main navigation something doesn't seem right. Any suggestions?
To be honest, I would consider re-structuring the whole header; putting things in the right order and using padding/margins to settle things in place rather than ANY positioning.
That's not to say that positioning doesn't have it's place but overuse can lead to problems later.
I'm also confused why your logo h1 is ALL an image but your h2 isn't. Wouldn't it make sense to just use one image &/or actual text in the h1/h2 with the appropriate font-family. Granted the AT logo probably needs to be an image...but the rest of it...nah.
As for the navigation, I'm unsure why the background image has been applied to the 'body' instead of just the navigation 'ul'.
As for the H1 logo. Appropriate font styling is easier said than done when it comes to the designer. So I used the logo as the h1 site title and text as the h2 tagline. Just don't know how else to do it.
For the nav. Please enlighten me on how to get the ul background to go full width.
For the nav bg image, I'm not sure how much flexibility there is in the 2012 theme. Does everything have to be inside a single wrapper with the 'site' class?
Maybe I should get the source straight first. The new elements I introduced are the header-menu, phone, and search_form. Where should I place these in the code?
I did the best I could on that header. I left the css to a minimum to get clean feedback.
Still compacted on iPhone but I didn't replace hgroup with a class like Aaron suggested. I thought hgroup was an important mobile tag? Should I just create another class?
I can't just remove it since it's a child theme. Do you want me to set it to auto? I tried that and there's no improvement. Now there's a large horizontal scroll on mobile.
.menu-main-container, .main-navigation ul.nav-menu, and .main-navigation div.nav-menu > ul
are the classes that make up the nav. Do you see these classes in Firebug?
If you download WordPress and look at the style.css in the Twentyeleven theme, at the bottom is the media queries.
Otherwise a child theme imports this style sheet and allows an override. If I comment out that line in the original style sheet it will only return upon theme update. Let's say a turnkey (styled) theme ships with a border on a div that you don't want. In your child style sheet you would set it to border:none.
So we need to set the overflow to another value or do something else.
Your main blocks are all 100% wide. If you want to limit the width you add an inner wrapping element (in the example I gave it a class of...oddly enough..."inner" and set the width you want on that.
Not sure WP &/or your theme will let you do that....
At this point my career is being affected so I just used a 1 piece background.
Do you have any idea how to move the logo up on the iPhone without adding a break tag in .phone ?
There's a lot of floats and clears going on.
Any idea how to style the main menu in the media query?
I don't have an iPhone so I can't really help you any further.
As I said, I know very little about WP so perhaps I'm not your guy but I'm thinking that this basic theme / child-theme (which I think it is) is not the best option.
I was just kidding because this has been frustrating, but I'm about to mark as solved because I'm just using one repeating background and media queries. I've learned a lot from you too.
Your text to link here...
This header is what it needs to look like but I know it's not proper. I can't select the H2 tagline text and it's all over the place on the iPhone. Should I avoid absolute positioning? Should I put new divs above the hgroup or inside?
Like the plague.
To expand further.
Generally, we read left to right and from top to bottom (excepting, of course, those that don't) but that generality is fundamental to, say, websites in English.
As such, we should try to structure our HTML in the same way. If your logo/hgroup is top-left it should come before anything else in your HTML...and so on.
That way there is little need to move things about with absolute &/or relative positioning.
Hey jk, I noticed a couple of things that are causing your issue
I would recommend that you
* Side note I would look at removing the clear:both from your h1, h2,h3, h4, h5, h6 elements and create a class that you call only when you need to use the clear:both attribute.
If this does not work for you try putting the code in Codepen an leaving us a link here.
For your side note, can you give me an example?
As for the height I need on the header, should I set a height to something like hgroup, #branding, or #header? Or just use the margins on the elements to push the height?
Also, if you inspect the main navigation something doesn't seem right. Any suggestions?
Thanks for this effective advice.
To be honest, I would consider re-structuring the whole header; putting things in the right order and using padding/margins to settle things in place rather than ANY positioning.
That's not to say that positioning doesn't have it's place but overuse can lead to problems later.
I'm also confused why your logo h1 is ALL an image but your h2 isn't. Wouldn't it make sense to just use one image &/or actual text in the h1/h2 with the appropriate font-family. Granted the AT logo probably needs to be an image...but the rest of it...nah.
As for the navigation, I'm unsure why the background image has been applied to the 'body' instead of just the navigation 'ul'.
Yeah we're on the same page with restructuring.
As for the H1 logo. Appropriate font styling is easier said than done when it comes to the designer. So I used the logo as the h1 site title and text as the h2 tagline. Just don't know how else to do it.
For the nav. Please enlighten me on how to get the ul background to go full width.
Thank you, I'm learning a lot.
Does that mean you don't have access to the font used for the h1 text (excluding the AT 'logo')?
For the nav bg image, I'm not sure how much flexibility there is in the 2012 theme. Does everything have to be inside a single wrapper with the 'site' class?
Not sure what to do because I did find a web font but it needs to have a specific kerning and such. I did find this Your text to link here...
Maybe I should get the source straight first. The new elements I introduced are the header-menu, phone, and search_form. Where should I place these in the code?
Your text to link here...
You can't put PHP in Codepen.
You have to give us the HTML output
I updated it.
jk take a look at http://codepen.io/doublea79/pen/ItJFj
I commented on some of your HTML and made some suggestions
No CSS?
First thing in the morning. I plan on asking for your assessment when I'm done, if you don't mind. Appreciate it.
I did the best I could on that header. I left the css to a minimum to get clean feedback.
Still compacted on iPhone but I didn't replace hgroup with a class like Aaron suggested. I thought hgroup was an important mobile tag? Should I just create another class?
Your text to link here...
Your text to link here...
jk ,
line 138 on your style.css
This should be removed or converted to %;
That helped on the iPhone. How do you suggest I move the .site-header h2 up under the title and the .extra-menu-top up more.
Also, do you see any issues with .menu-main-container? What's the proper way to move it up? and should I adjust the height?
Thanks Aaron!
The h2 will, unfortunately, need to be moved padding-left & negative margin..(I think that's the best way).
Try this:
On your searchform
On the menu, I do think you should remove the 'red' bg image from the [body] and apply it to the .main-menu-container element.
We can work on the full width after it's in the right place.
Let me work on something...
EDIT: Here we go...http://codepen.io/anon/pen/EvcCg
Preserves your current wrapper system...
I've follwed your css instructions. That link you gave is empty.
The fade.jpg used to be on the html tag. Now it's on the body tag. Hope that's pro.
Will negative margins cause the page on the iPhone to move horizontally? Maybe just left and right?
I'm new to twentytwelve theme also but on the iPhone there's a mobile menu button that doesn't do anything. Looks like the menu is already expanded.
Sorry: http://codepen.io/Paulie-D/pen/EvcCg
Hey Paulie. Still nothin there?
Try it now....I had it marked as Private for some reason.
Give it a second or two to access your bg image too.
Your text to link here...
Please check now. Something is not taking.
You need to remove 'overflow: hidden' from line 1435 of your CSS under the .site class.
I can't just remove it since it's a child theme. Do you want me to set it to auto? I tried that and there's no improvement. Now there's a large horizontal scroll on mobile.
.menu-main-container, .main-navigation ul.nav-menu, and .main-navigation div.nav-menu > ul are the classes that make up the nav. Do you see these classes in Firebug?
Sorry....I don't understand why you can't comment out that line...but then I'm not an expert in WP.
If you download WordPress and look at the style.css in the Twentyeleven theme, at the bottom is the media queries.
Otherwise a child theme imports this style sheet and allows an override. If I comment out that line in the original style sheet it will only return upon theme update. Let's say a turnkey (styled) theme ships with a border on a div that you don't want. In your child style sheet you would set it to border:none.
So we need to set the overflow to another value or do something else.
Maybe this is why one of hte guys from the WordPress support said he doesn't know how to set the nav to 100% without setting the body background.
Well there are a couple of ways but my guess is that it's not possible without re-structuring the HTML/PHP.
Appreciate you not giving up on my topic. Is there a way to get you the header file so you can see the entire code?
No need....I can see it clearly in Web Inspector/Developer Tools
As I said, I know very little about WP and the themes/sub-themes.
Without taking the menu OUT of the wrapper that is keeping everything centred there is little we can do.
What you do in effect is something like this. http://codepen.io/Paulie-D/pen/oGKtA
Your main blocks are all 100% wide. If you want to limit the width you add an inner wrapping element (in the example I gave it a class of...oddly enough..."inner" and set the width you want on that.
Not sure WP &/or your theme will let you do that....
Why can't we take the menu out of the wrapper?
Dunno....can you?
Will the theme let you?
At this point my career is being affected so I just used a 1 piece background. Do you have any idea how to move the logo up on the iPhone without adding a break tag in .phone ? There's a lot of floats and clears going on. Any idea how to style the main menu in the media query?
I don't have an iPhone so I can't really help you any further.
As I said, I know very little about WP so perhaps I'm not your guy but I'm thinking that this basic theme / child-theme (which I think it is) is not the best option.
I have no idea what this means.
I was just kidding because this has been frustrating, but I'm about to mark as solved because I'm just using one repeating background and media queries. I've learned a lot from you too.
Still in dev but when in doubt use one background image. Your text to link here...
The header looks good on mobile. Now I can use the same approach to use a different layout for the content on mobile.
Thanks Paulie and Aaron!