#header width

[Andrej]

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.

.pageWidth {
margin: 0 30px;

 

[HenrikHansen]

http://xenforo.com/community/threads/header-styling-question.26451/

 

[Andrej]

http://xenforo.com/community/threads/header-styling-question.26451/

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.



I am little lost..

 

[Shelley]

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

#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

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

 

[Andrej]

Set the top part by pasting the following in extra

#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

#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.

 

[Marileah]

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]

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

#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:



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

 

[Marileah]

thanks Andrej Muah!