Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center


  #1  
Old Mar 12, 2014, 06:13 PM
SigWS
 
29 posts · Sep 2012
I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

I tried moving this stuff around with margins and made it LOOK right, the problem is it moves around when the browser window is resized. How do I stop that?

The attached image is what I want it to look like, and stay fixed this way no matter the window size.

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?
Attached Thumbnails
Click image for larger version

Name:	fullwidthheaderfooter900.jpg
Views:	529
Size:	26.7 KB
ID:	2513  

Last edited by lmilesw; Mar 13, 2014 at 09:02 PM. Reason: Reduce size of image
  #2  
Old Mar 12, 2014, 07:43 PM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.
They don't look like they are outside the area of the center column

Quote:
Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?
add some padding??
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 13, 2014, 09:32 AM
SigWS
 
29 posts · Sep 2012
Sorry, I think you're misunderstanding me.

That is what I want it to look like at all times. If you change the window size of the browser the menu and title float dependent on where the edge of the browser window is, rather than the center column. When the window size is made smaller everything shifts to the right, basically.


Add padding where? The places I have tried it do not give the affect I am looking for.
  #4  
Old Mar 13, 2014, 10:50 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
How would I know what is would look like when you provides image and not a link to the site?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 13, 2014, 03:12 PM
SigWS
 
29 posts · Sep 2012
It is not currently on a publicly available server.

Ignore the picture.

I set my site width in ATO Layout to 960px.

If I set my Header to be full width:yes and my footer to be full width:yes, how do I keep content within the header and footer statically placed within the 960px side to side area of the center column?

Basically what I am trying to accomplish is like this site: http://havendesignstudio.co

I can make this look the same with margins but when the window is resized the margin is based off the edge of the window, and it causes the menu and the logo to move around and become uncentered from the center column.
  #6  
Old Mar 13, 2014, 04:01 PM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the full width header option is just that: The entire header becomes full width. That means the header image, logo, menus are all full width.

It looks like you don't want a full width header, you want a background image that is full width.

One of the sample styles shows and example of this approach. You can find the sample styles in the atahualpa/styles folder.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 13, 2014, 04:49 PM
SigWS
 
29 posts · Sep 2012
That style does not do what I want.

Can anyone give me a yes or no: can content placed in the header area be statically set to always display centered above the 960px center column when using a full width header setting or not?

If yes, any ideas how?
  #8  
Old Mar 13, 2014, 07:36 PM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try defining the width of the div to match your center area width and add margins to it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 13, 2014, 08:53 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
HTML Code:
margin: 0 auto
will center a div with a defined width.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Mar 14, 2014, 01:16 AM
SigWS
 
29 posts · Sep 2012
I think I might go in a different direction because I just can't seem to make this happen.

Since the FRDG site is not publicly available I decided to apply the same sort of style to a new personal blog I am starting to work on and in doing so I've come up with what I think will be a good alternative to what I am trying to accomplish. See http://dirtsweatgears.com for an example.

We have decided however we don't like the gap in between the header area and the center column (where my background image shows through between white box and grey header)

This gap is ONLY present when I use the CSS code below to float the category menu down to line up with the logo/site name text. If I let the menu sit above the logo area, the gap is not present. For the life of me I can not seem to fix this.

HTML Code:
div#menu12 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}
	}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a:link, 
div#menu2 ul.rMenu li.current_page_item a:active, 
div#menu2 ul.rMenu li.current_page_item a:hover, 
div#menu2 ul.rMenu li.current_page_item a:visited, 
div#menu2 ul.rMenu li a:hover {
    background-color: transparent;
}
div#menu2 ul.rMenu {
    background-color: transparent;
}

#menu2 {position: relative; top: -130px;)
}
Please bear with me as I have to teach myself this stuff as I am doing it - I love playing with it but I don't know enough to understand it all - when I come here for help it's because I have not been able to figure it out or find a solid answer in my research.
  #11  
Old Mar 14, 2014, 06:29 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
use this
HTML Code:
div#menu1 {width: 960px; margin: 0 auto;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Mar 14, 2014, 07:51 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
The code you said you used has an extra closing bracket on the first item. Is that a typo?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Mar 14, 2014, 08:11 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To close the gap just add a height of 0 to the last item like the following and take out the closing parenthesis which is invalid CSS.
HTML Code:
#menu2 {
position: relative;
top: -130px;
height: 0;
}
All of your CSS could be changed to the following for simplification
HTML Code:
div#menu12 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a, div#menu2 ul.rMenu li a:hover {
background-color: transparent;
}
div#menu2 ul.rMenu {
background-color: transparent;
}
#menu2 {position: relative;
top: -130px;
height: 0;
}
And even some of that may be redundant or unnecessary but it would take more experimentation to determine.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #14  
Old Mar 14, 2014, 09:47 AM
SigWS
 
29 posts · Sep 2012
Quote:
Originally Posted by juggledad
use this
HTML Code:
div#menu1 {width: 960px; margin: 0 auto;}
That's almost there! It got the menu within the area wanted. I'm trying to apply this same to the logo graphic as well to bump it right, but I am either not using the right selector, or it has no effect on it.

Quote:
Originally Posted by lmilesw
The code you said you used has an extra closing bracket on the first item. Is that a typo?
That extra bracket - I don't know why but if you remove it, it makes my menu animation behave weird. It doesn't follow the hover colors I set unless the second bracket is there.

Quote:
Originally Posted by lmilesw
To close the gap just add a height of 0 to the last item like the following and take out the closing parenthesis which is invalid CSS.
HTML Code:
#menu2 {
position: relative;
top: -130px;
height: 0;
}
All of your CSS could be changed to the following for simplification
HTML Code:
div#menu12 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
}
div#menu2 ul.rMenu li {
    background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a, div#menu2 ul.rMenu li a:hover {
background-color: transparent;
}
div#menu2 ul.rMenu {
background-color: transparent;
}
#menu2 {position: relative;
top: -130px;
height: 0;
}
And even some of that may be redundant or unnecessary but it would take more experimentation to determine.
Thanks, that worked great (once I added that mysterious second closing bracket)
  #15  
Old Mar 14, 2014, 10:04 AM
SigWS
 
29 posts · Sep 2012
I've just changed to using a new widget area for the "logo" and I am getting closer but I still can't figure out how to stick it to the left edge of the 960px center column. This is so frustrating sometimes! lol

Edit: also what is causing my site to have a scroll bar on the bottom of the page when full screen, when full width header in enabled?

Last edited by SigWS; Mar 14, 2014 at 10:18 AM.
  #16  
Old Mar 14, 2014, 12:49 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I would look at the rest of your css for an extra brace.

The logo looks like it is at the left edge.

The scroll bar looks to be a bug in the full width footer code. You can fix by adding the following to CSS Inserts.
HTML Code:
div#footer.full-width {
padding-right: 0;
padding-left: 0;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Mar 14, 2014, 01:11 PM
SigWS
 
29 posts · Sep 2012
Quote:
Originally Posted by lmilesw
I would look at the rest of your css for an extra brace.

The logo looks like it is at the left edge.
It is at the left edge, but it's not stuck to it. If you resize the window notice how the right side of the menu sticks with the right edge of the center column? The logo floats around, I want the left side of the logo to stick to the left side of the center column. Tried various things but I just can't get it to work the way I was thinking it should after you guys turned me onto the margin auto bit.


Quote:
The scroll bar looks to be a bug in the full width footer code. You can fix by adding the following to CSS Inserts.
HTML Code:
div#footer.full-width {
padding-right: 0;
padding-left: 0;
}
Will have a look!
  #18  
Old Mar 14, 2014, 03:15 PM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you have your header widget area set to 'position: absolute;' - that means it won't move.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Mar 14, 2014, 03:42 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Just for the "fun" of it I played with the CSS a bit. This might get you closer to what you want.
HTML Code:
div#header_widget {
    margin: 30px 0 0 -275px;
    position: absolute;
    width: 100%;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old Mar 14, 2014, 04:24 PM
SigWS
 
29 posts · Sep 2012
Quote:
Originally Posted by lmilesw
Just for the "fun" of it I played with the CSS a bit. This might get you closer to what you want.
HTML Code:
div#header_widget {
    margin: 30px 0 0 -275px;
    position: absolute;
    width: 100%;
}
That nailed it. Thanks
  #21  
Old Mar 14, 2014, 04:30 PM
SigWS
 
29 posts · Sep 2012
I was only going to use this on the FRDG site I am trying to bring up for our sister company but I think I'm going to steal this style for that personal blog of mine too. haha

Thanks gentleman!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Making the menu bar full width (but header and content both smaller) mrsp31wannabe Header configuration & styling 10 Feb 25, 2014 08:00 PM
I want a full width header, fixed width content and a background image tsheridan Header configuration & styling 5 Jan 29, 2013 03:46 PM
Full-width header, narrower content area? paulae Header configuration & styling 26 Nov 14, 2012 04:51 PM
[SOLVED] Full width footer with widgets but narrower content netrdx Header configuration & styling 4 Nov 12, 2010 04:08 PM
Logo positioned over page menu bar markday Header configuration & styling 3 Nov 3, 2009 02:36 PM


All times are GMT -6. The time now is 03:58 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.