Jump to content
Sign in to follow this  
anlinares

Full Width Header / Alignment Issues

Recommended Posts

anlinares

I wanted my header to stretch across the entire width of the screen. The only way I could figure how to make it work was to make it a bg image and repeat horizontally. However, there may be a better way that prevents this misalignment from occurring: screenshot.png Any idea on how I can either manipulate the navigation bar to line up with the background image or insert the header image in a better way? Thanks for your help. You can view the site here. Thanks for your help!

Share this post


Link to post
Share on other sites
Kate

Hi Ashley, There's a couple ways to do it. But, here's one:

#branding .content-pad{padding-top:17px;}
	#primary-nav li a{padding-top:6px;}

Now, it appears you may have also used the wrong hex code for the green in the background. May want to change that too ;)

Share this post


Link to post
Share on other sites
anlinares

Okay, 1 problem fixed! 1 to go! Both hex codes are #b1d134. Any idea on why they are showing up different? Thank you so much!

Share this post


Link to post
Share on other sites
Danny

When I load the image up in photoshop the green hex color is different to the hex color used on the a link css. The image hex color is this: #bdd845 The a link css hex color is this: #B1D134 So simply change the color to match the one used in the image: so used this:

#primary-nav li a {
	    -moz-border-bottom-colors: none;
	    -moz-border-image: none;
	    -moz-border-left-colors: none;
	    -moz-border-right-colors: none;
	    -moz-border-top-colors: none;
	    background: none repeat scroll 0 0 #bdd845;
	    border-color: transparent transparent -moz-use-text-color;
	    border-style: solid solid none;
	    border-width: 1px 1px medium;
	    color: #FFFFFF !important;
	    display: block;
	    font-size: 0.9em;
	    font-weight: bold;
	    letter-spacing: 0.03em;
	    line-height: 1.05em;
	    padding: 10px 15px;
	    text-decoration: none;
	    text-transform: uppercase;
	}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
anlinares

Strange! I got the #B1D134 color from my bg image. But I changed it to #bdd845 and it matches. Thanks for your help!

Share this post


Link to post
Share on other sites
anlinares

It seems the alignment is different across platforms. To get the nav bar even with my background image, it seems I need: Padding of 16 in IE on PC Padding of 13 in FireFox on PC Padding of 12 in FireFox on Mac Is there a better way that either my bg image or my nav should be entered so that this isn't an issue? Or is there a way to set parameters per browser? Right now I have padding set to 12. Please help! Thanks!

Share this post


Link to post
Share on other sites
anlinares

Awesome tip! I bet this will do the trick. Now one (really stupid) question. Which file should I add this code to? I've been editing the css sheet but I don't think the code goes there, does it?

Share this post


Link to post
Share on other sites
timlinson

You can put it in the custom code > custom css field. Editing stylesheets is fine too if you want. Either platformbase/style.css (or platformbase/base.css if you have an older version).

Share this post


Link to post
Share on other sites
anlinares

I thought for sure that would do the trick but no such luck. Any suggestions?

Share this post


Link to post
Share on other sites
Kate

Hey Ashley, I'm not sure why it's showing up different in different browsers. But, the other option was to just move the background position. So, you would remove the lines I gave you above, and then change where the image starts vertically. (You may need to modify the height of the image... not sure.) Make sense? http://www.w3schools.com/css/css_background.asp

Share this post


Link to post
Share on other sites
anlinares

So I added this: body { background-image:url('http://www.highcottontesting.info/transform/images/background_02.png'); background-repeat:repeat-x; background-position:left top; } But it is still showing up differently across browsers. It doesn't look horrible if there is no fix for this. But still.... I was shooting for something a little better than "not horrible". :) I was doing so good on figuring out all the issues on my own until this little problem came along!!! I'm stumped.

Share this post


Link to post
Share on other sites
anlinares

Any other suggestions or should I give up hope on this one?

Share this post


Link to post
Share on other sites
catrina

Cross-browser compatibility can be very frustrating! :) In which browsers does the background look off?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

Its working in Firefox on my mac with padding of 12. But it is just a smidge off (needs padding of 13) in Safari and in Firefox on my pc. It is quite a bit off in IE on pc (needs padding of 16 to be even). I haven't tested everything. I just have those 4 readily available. Wish they would all just work the same!!!

Share this post


Link to post
Share on other sites
timlinson

Instead of pixels, try using `em` or percentages

Share this post


Link to post
Share on other sites
anlinares

Same issue :( Tried with both em and percentages and with each I can get it to work in one browser but not the others.

Share this post


Link to post
Share on other sites
catrina

Try adjusting the padding in both the image and the navigation to see if a certain mix of values would end up working out.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

Yes, I initially had them in pixels. So I've tried playing with the padding in percentages of both the branding and the nav. Same results. I can get them even on one but not the others. This doesn't seem like an overly complicated design concept so don't know why it's turning out to be so difficult. Perhaps I've gone about it wrong. Is there a way I could code the layout differently to avoid the problem? Somehow integrating the nav with the background image or getting rid of the green border on the background image all together and making the nav bar stretch across the full-width of the screen (leaving the nav buttons in place, of course) so that I don't have to worry about nav bar lining up exactly on every browser? Does that make sense?

Share this post


Link to post
Share on other sites
catrina

You can try it, but I'm not sure what difference it would make. You just need to make sure you're doing customizations in the child theme.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

Yes, I am using the child theme. I've pasted the code I'm using for my navigation below. Any clue on what I can add to make the nav bar stretch full-width? Thanks! /* *************** NAVIGATION CSS *************** */ #primary-nav{ background-color:#bdd845; width:990px; margin-left:-5px; z-index:1; } #breadcrumb {position:relative;z-index:0;} #primary-nav #nav_row { border-bottom:0px; } #primary-nav .content-pad { padding-bottom:0px; padding-top:0px; } /* this style is adding a border, keep in mind for color changes */ #primary-nav #nav_row { border-bottom: 0px; } /* this style is setting the color, but keep an eye on font-weight for your custom color */ #primary-nav li a{ color: #FFFFFF !important; line-height: 1.05em; padding: 10px 15px 10px; text-decoration: none; display: block; border: 1px solid transparent; border-bottom:none; font-weight: bold; font-size: .9em; text-transform: uppercase; letter-spacing: .03em; background: #bdd845; } /*IE6 border color (transparent border fix)* -- also keep an eye on this when changing colors/ *html #primary-nav li a{border-color: white;} /* here is the hover color for the links in the nav bar */ #primary-nav .main-nav li a:hover{ background: #FFF; color: #B1D134 !important; } #primary-nav .main-nav li a:clicked{ color: #bdd845 !important; } .main-nav li.current_page_item ul a{ background: #bdd845; color: #fff; } /*********** SUB NAVIGATION BORDERS & STYLING ***********/ #primary-nav li:hover > a, #primary-nav ul ul :hover > a { background: #FFF; color: #bdd845 !important; } #primary-nav .main-nav ul.sub-menu li a{ background: #FFF; color: #bdd845 !important; } #primary-nav .main-nav ul.sub-menu li a:hover{ background: #f1f1f1; } /* NOT IN USE FOR NOW #primary-nav .main-nav .ul.sub-menu .menu-item:last-of-type{ border-bottom: 1px solid #B1D134; } #primary-nav .main-nav ul.sub-menu li a:hover{ background: #bdd845; color: #FFF !important; } */ /* #primary-nav .main-nav ul.sub-menu .menu-item{ border-left: 1px solid #bdd845; border-right: 1px solid #bdd845; } #primary-nav .main-nav ul.sub-menu .menu-item:last-child{ border-bottom: 1px solid #bdd845; } */ /* *************** END NAVIGATION CSS *************** */

Share this post


Link to post
Share on other sites
catrina

I think you can make the navigation bar wider by increasing the width of the menu items inside of it. Example CSS:

ul#menu-site-navigation li.menu-item {width: VALUEpx;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

If I adjust the width then that will just spread my buttons out, right? I still want the buttons to be contained within the same space, the width of the canvas. I just want the green bar to stretch across the full-width of the window.

Share this post


Link to post
Share on other sites
catrina

From what I see on my MacBook, the green navigation bar is already stretching full-width.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

The green bar stretching across the screen was part of my bg image. My nav bar was a few pixels off in other browsers and the mis-alignment with the bg image would be apparent. I have removed the green bar from my bg so that now you should only see the bg image and the nav bar. So, if you look now, you can see that I want to try to stretch the green bar across, leaving the buttons in place. This way, a few pixels one way or the other will not make a major difference in the appearance as it does when the bar was a part of the bg image. Possible? Does that make sense?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×