No menu navigation on Firefox & Safari

  • Resolved benrsullivan

    (@benrsullivan)


    11 years ago

    I’m currently working on the following site:
    http://2013.whitehallrow.com/

    The navigation menu shows up perfectly fine in Chrome and IE, but when opened in either Firefox or Safari, the menu disappears completely, lines and all. I don’t know much about cross-browser compatibility; could I have some guidance on how to fix this?

Viewing 12 replies - 1 through 12 (of 12 total)
  • esmi

    (@esmi)

    11 years ago

    What happens when you switch to the original, unedited, parent theme?

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    When I switch back to the parent, it shows up… the styling is a bit off, but it does appear.

    esmi

    (@esmi)

    11 years ago

    Well, that at least narrows the area of investigation down to your child theme. Have you tried validating your site’s markup & CSS when the child theme is active?
    http://codex.wordpress.org/Validating_a_Website

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    I just validated both the HTML and CSS. The only HTML error was this:

    Line 225, Column 10: The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class=”subheading” element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.

    As for CSS, there are a few errors with “.menu-toggle”, each saying:

    Value Error : background-image top is not a color value )

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Remove your negative margin that you’ve set on the navigation menu.
    Negative margins will cause browser compatibility issues.

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    That worked! Thanks. The reason I had the negative margin in there was to reduce the amount of white space between the top of the page and the top of the header image; is there any way to do that again without using a negative margin?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    The white image above the navigation is caused by the header image itself
    http://2013.whitehallrow.com/wp-content/uploads/2013/04/cropped-header1.png

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    Sorry, I meant above the header image… if you hit CTRL+A while on the page, you’ll see what I mean.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Do you have Google Chrome?

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    Yes, I’m mainly using Chrome for development. I’ve tried inspecting the element, and changing the CSS accordingly, but I haven’t had any luck so far…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    I right clicked on the space above your header image [screenshot]

    Found there was padding on <header> [screenshot], use this CSS:

    .site-header {
 padding-top: 0;
}

    Also found that you have empty headings that are taking up space [screenshot], use this CSS;

    .site-header hgroup {
 display: none;
}

    Also found you had a margin top on your header image [screenshot], use this CSS;

    img.header-image {
 margin-top: 0;
}

    The rest of the white space is caused by your header image.

    Thread Starter benrsullivan

    (@benrsullivan)

    11 years ago

    Excellent! Many thanks, looks a lot better now.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘No menu navigation on Firefox & Safari’ is closed to new replies.