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

#header width

Discussion in 'Styling and Customization Questions' started by Andrej, Mar 24, 2013.

  1. Andrej

    Andrej Well-Known Member

    Снимок экрана 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. :)

    .pageWidth {
    margin: 0 30px;
  2. HenrikHansen

    HenrikHansen Well-Known Member

  3. Andrej

    Andrej Well-Known Member

  4. Shelley

    Shelley Well-Known Member

    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%;}
    Jake Bunce and Andrej like this.
  5. Andrej

    Andrej Well-Known Member

    Thank you very much! I added a margin to Content as well, and the result is great. :) Appreciate your help.
    Shelley likes this.
  6. Marileah

    Marileah Member

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

    Andrej Well-Known Member

    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:
    Снимок экрана 2013-03-27 в 9.12.05.png

    Initiate a private conversation with me if you still don't figure it out.
    Akela likes this.
  8. Marileah

    Marileah Member

    thanks Andrej :) Muah!

Share This Page