Move Nav Bar

  • Resolved richanderson052

    (@richanderson052)


    11 years, 8 months ago

    Hi Guys,

    First time posting here so bear with me if I am missing anything.

    So I installed Toolbox them and I havent made any changes yet (I am hosting it on local server).

    So I have the basic theme loaded up and what I am trying to do is move the nav bar to the very top and have it go the full width of the page (no spaces between the edge) Please see this screenshot.

    See where it says:

    <nav id="access" role="navigation">

    I have no idea where to put it in the general code. As I am using Google Chrome to customize before I make changes, I cant seem to find where in the actual code I need to make this change.

    Any thoughts?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Make sure it’s just after the <body> tag.
    Make sure you’re making modifications through a Child Theme.

    Thread Starter richanderson052

    (@richanderson052)

    Hi Andrew,

    Thanks for the quick reply.

    Just to clarify, I put it AFTER the <body> tag even though I want it to go before it so it goes the width of the page? If I put it just after the body tag it still wont go the full width

    Many thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The reason why it won’t go full width is therefore not because it is constrained by any parent <div>s. It must have some width applied to it, or maybe its displayed inline?

    Can you provide a link to the issue?

    Thread Starter richanderson052

    (@richanderson052)

    Hi Andrew,

    I had it hosted locally so ill just upload a wordpress site now. So here is the site:

    https://ydkgaming.com/

    I would like the nav bar to go to the very top as shown in the screenshot. Wracking my brains and cant seem to get to bottom of it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your header.php file (in your Child Theme) should therefore be this;
    https://pastebin.com/DdwhuktL

    Thread Starter richanderson052

    (@richanderson052)

    Hi Andrew,

    I have made them changes. This is how far I got before but still couldnget the required affect.

    You see where there is a little white space on either side of the nav bar? I want that to be gone and have the nav bar go the full width without any gaps.

    If i move it outside the body tag when editing on Chrome it works fine but I cant seem to replicate it in editor

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add some CSS resets
    https://meyerweb.com/eric/tools/css/reset/

    Try adding this:

    body {
  margin: 0;
}

    Thread Starter richanderson052

    (@richanderson052)

    Thanks Guys,

    I went wit this in the end:

    body {
margin: 0px;
padding: 0px;
}
#site-title {
margin: 0px 0px;
}

    Cheers for the help

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Move Nav Bar’ is closed to new replies.

Tags