• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

#header width

Andrej

Well-known member
#1
Снимок экрана 2013-03-24 в 9.50.51.png
I want to make the header width the same as the moderator bar width. The CSS below controls the .pageWidth so it resizes the whole page, but I only want to do the header, as shown in the image above. Tried inspecting the element but haven't found anything (probably missing something) Please help. :)

Code:
.pageWidth {
margin: 0 30px;
 

Shelley

Well-known member
#4
Thanks, the only problem is that I only want the header to resize (like I described above), while the pageContent is still the same fixed width.

View attachment 42555

I am little lost..
Set the top part by pasting the following in extra

Code:
#navigation {width: 100%;}
Then go into page width controller settings in the style properties and set your desired width. If i understood you correctly.

EDIT: or if you wanted both the nav and header a 100% add the following in EXTRA.CSS instead of the above

Code:
#navigation, #header .pageWidth  {width: 100%;}
 

Andrej

Well-known member
#5
Set the top part by pasting the following in extra

Code:
#navigation {width: 100%;}
Then go into page width controller settings in the style properties and set your desired width. If i understood you correctly.

EDIT: or if you wanted both the nav and header a 100% add the following in EXTRA.CSS instead of the above

Code:
#navigation, #header .pageWidth  {width: 100%;}
Thank you very much! I added a margin to Content as well, and the result is great. :) Appreciate your help.
 
#6
hi Andrej, can you give me the details how you do it, i've try the #navigation {width: 100%;}, not working on me the length of the width stretch to right in mine , how to get it correct that both left and right will be the same? I've really appreciate if you would help me.
 

Andrej

Well-known member
#7
hi Andrej, can you give me the details how you do it, i've try the #navigation {width: 100%;}, not working on me the length of the width stretch to right in mine , how to get it correct that both left and right will be the same? I've really appreciate if you would help me.
I just did it on a demo install.

Add this code to extra.css template

Code:
#navigation, #header .pageWidth  {width: 100%;}
Navigate to Admin CP > Appearance > Styles > Style Properties -> General -> Page Width Controller

Remove the right and left margin, then click "Update Style Properties" then go to Content and apply margins to left and right (for instance 25px). Adjust as you need.

The result is:
Снимок экрана 2013-03-27 в 9.12.05.png


Initiate a private conversation with me if you still don't figure it out.