• Resolved danbrad2000

    (@danbrad2000)


    Hi,

    I have just created a custom sprite menu for my website (not quite finished and working yet) However i cannot get it to align up correctly in my header. There is a small gap to the left of the menu which is pushing everything across.

    The site is www(dot)rollquick(dot)co.uk

    Please let me know if you need any code or anything to make it clearer.

    Thanks in advance.

    Dan

Viewing 14 replies - 1 through 14 (of 14 total)
  • My first thought is a coding error </left/> just at/above your menu…

    https://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.rollquick.co.uk%2f

    Thread Starter danbrad2000

    (@danbrad2000)

    Do i need to remove it or add in a <left>?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What is <left>?

    Thread Starter danbrad2000

    (@danbrad2000)

    Soz im a bit of a wordpress novice! I have removed the </left/> section but hasnt made any difference.

    please try working with a browser inspection tool such as Firefox’ web developer add-on to find out where the gap is coming from;

    you should find that there is a left and right margin with #access ul;

    compensate by adding this to style.css:

    #access ul { margin-left: 0; margin-right: 0; }

    left is used in CSS for example, margin-left or padding-left or align:left…looks like some code was somehow transposed – have you concluded what is outputting this HTML?

    Thread Starter danbrad2000

    (@danbrad2000)

    I have used google chrome developer tool. There is nothing i can edit there to remove the gap. It doesn’t seem to be any kind of padding or margin. Added the code but no luck.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I have used google chrome developer tool. There is nothing i can edit there to remove the gap

    Am I missing the point or are these [screenshot] the styles behind the gap?

    Thread Starter danbrad2000

    (@danbrad2000)

    its the gap on the left. I cannot seem to select that part of the page for some reason to see the code. Will it be in the style.css?

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You don’t need to further explore where the style originates.
    The developer tool has exposed the style and now you need to override it.
    Are you using a Child Theme or Custom CSS plugin?

    Thread Starter danbrad2000

    (@danbrad2000)

    Thanks your awesome that works now! Any tips for how i can see the orange line that you selected? As i can just get a blue thicker line up (sorry for the un-technical terms!)

    always clear the browser cache if you don’t see the changes you have made to the styles; ‘reload’ or press ‘ctrl f5’ …

    the buttons are all in one row now (FF17, IE7) – the rest is fine tuning of your background positions etc…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hover your mouse over HTML elements in Chrome’s developer tool.
    – Orange represents margin.
    – Green represents padding.

    Thanks to Seacost & Alchymyth

    Thread Starter danbrad2000

    (@danbrad2000)

    Cheers guys. Thanks alot

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Removing space to left of menu bar’ is closed to new replies.