Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center (http://forum.bytesforall.com/showthread.php?t=21721)

SigWS Mar 12, 2014 05:13 PM
[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center
 
1 Attachment(s)
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?

juggledad Mar 12, 2014 06:43 PM
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??

SigWS Mar 13, 2014 08:32 AM
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.

juggledad Mar 13, 2014 09:50 AM
How would I know what is would look like when you provides image and not a link to the site?

SigWS Mar 13, 2014 02:12 PM
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.

juggledad Mar 13, 2014 03:01 PM
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.

SigWS Mar 13, 2014 03:49 PM
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?

juggledad Mar 13, 2014 06:36 PM
try defining the width of the div to match your center area width and add margins to it.

lmilesw Mar 13, 2014 07:53 PM
HTML Code:
margin: 0 auto
will center a div with a defined width.

SigWS Mar 14, 2014 12:16 AM
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.

juggledad Mar 14, 2014 05:29 AM
use this
HTML Code:
div#menu1 {width: 960px; margin: 0 auto;}

lmilesw Mar 14, 2014 06:51 AM
The code you said you used has an extra closing bracket on the first item. Is that a typo?

lmilesw Mar 14, 2014 07:11 AM
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.

SigWS Mar 14, 2014 08:47 AM
Quote:
Originally Posted by juggledad (Post 107333)
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 (Post 107336)
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 (Post 107338)
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)

SigWS Mar 14, 2014 09:04 AM
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?

lmilesw Mar 14, 2014 11:49 AM
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;
}

SigWS Mar 14, 2014 12:11 PM
Quote:
Originally Posted by lmilesw (Post 107347)
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!

juggledad Mar 14, 2014 02:15 PM
you have your header widget area set to 'position: absolute;' - that means it won't move.

lmilesw Mar 14, 2014 02:42 PM
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%;
}

SigWS Mar 14, 2014 03:24 PM
Quote:
Originally Posted by lmilesw (Post 107353)
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

SigWS Mar 14, 2014 03:30 PM
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!


All times are GMT -6. The time now is 08:55 PM.

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