The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    Setting Nav bar width?

    Tattastic
    Tattastic
    Forumember


    Male Posts : 104
    Reputation : 1
    Language : English
    Location : Middlesbrough, UK

    Solved Setting Nav bar width?

    Post by Tattastic February 1st 2016, 8:32 pm

    Setting Nav bar width? Hrlp16

    Had an idea for changing the look of my forum, I have moved the Nav bar to the top of my page (image above, code below).

    Code:
    #page-header .navbar {
      position:absolute;
      top:0;
      left:0;
      right:0;
    }

    But my question is how can I set the width of my Nav Bar? I want to match the forums width (1291px).

    Thanks in advance for any help
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Setting Nav bar width?

    Post by Ange Tuteur February 1st 2016, 8:59 pm

    You can add the
    Code:
    width
    property :
    Code:
    width:1291px;

    but you'll need to drop the
    Code:
    right
    property. If you set both the left and right to 0 the containing element will span the width of the webpage instead. You might need to make a few adjustments afterwards, because the navbar will be off center due to the left property being set to 0.
    Tattastic
    Tattastic
    Forumember


    Male Posts : 104
    Reputation : 1
    Language : English
    Location : Middlesbrough, UK

    Solved Re: Setting Nav bar width?

    Post by Tattastic February 1st 2016, 11:44 pm

    Thanks for the reply, I have tired that, and found the width required for my pc resolution (left 300px), but then when viewing it on my laptop (smaller resolution) is is off centre because there is not a 300px margin at the left side.

    Is there any code so you dont need to adjust the margins, but can just tell it to centre?
    Van-Helsing
    Van-Helsing
    Hyperactive


    Male Posts : 2431
    Reputation : 116
    Language : English, Greek

    Solved Re: Setting Nav bar width?

    Post by Van-Helsing February 2nd 2016, 1:34 am

    Hello,
    You can change the position on your css code from absolute to relative.

    Example:
    Code:

            #page-header .navbar {
              position:relative;
              top:0;
              left:0;
              right:0;
              width: 1291px;
            }
    Tattastic
    Tattastic
    Forumember


    Male Posts : 104
    Reputation : 1
    Language : English
    Location : Middlesbrough, UK

    Solved Re: Setting Nav bar width?

    Post by Tattastic February 2nd 2016, 8:55 pm

    Sorted it, just took left and right margin out of the coding Cool
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19325
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha

    Solved Re: Setting Nav bar width?

    Post by Ape February 2nd 2016, 10:45 pm

    Topic solved and archived   



    Setting Nav bar width? Left1212Setting Nav bar width? Center11Setting Nav bar width? Right112
    Setting Nav bar width? Ape_b110
    Setting Nav bar width? Ape1010

      Current date/time is September 23rd 2024, 6:25 am