Navigation Bar Glitching

  • Resolved jztaddwater

    (@jztaddwater)


    11 years ago

    I modified the WordPress theme: “Landscape” early March to create my own personal website. Two days ago, I checked it again and realized that the navigation bar was glitching. One of the links to a page was floating above the rest. I had not done anything to the code since I first got my site up and it was working perfectly then. When I previewed the unmodified Landscape theme again, this glitch also occurred. I also realize this only happens in Google Chrome.

    I was wondering if anyone else had this problem or if anything can be done to fix this. I would really appreciate the help. Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Can you check whether the issue occurs on the theme’s demo website?

    If it does, please state the browser & browser version it occurs in.

    Thread Starter jztaddwater

    (@jztaddwater)

    11 years ago

    This issue does not occur when I click the live demo on the link you gave me.

    However, when I hit “preview” here:

    http://wordpress.org/extend/themes/landscape

    the issue occurs in Google Chrome, Version 26.0.1410.43 m (which is up to date).

    Thanks for your help!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Do you have a section in the dashboard to add Custom CSS?

    Thread Starter jztaddwater

    (@jztaddwater)

    11 years ago

    Yes. I can edit the style.css file in the dashboard.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    It’s best not to edit the theme’s files because you’ll lose your edits when the theme updates.

    Try downloading and installing this Custom CSS Manager plugin.

    Then, within the Custom CSS Manager section of the dashboard, enter this;

    .main-navigation ul li {
 float: left;
}

    Thread Starter jztaddwater

    (@jztaddwater)

    11 years ago

    It did resolve the issue in Chrome….but now the padding is much larger than I had initially intended. Would you know how to fix this?

    Also, why do these issues only happen in Chrome?

    Thanks so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Instead of that style I recommended, try this;

    .main-navigation ul li:after {
 margin: 0;
}

    Thread Starter jztaddwater

    (@jztaddwater)

    11 years ago

    Thank you so much! It works wonderfully now.

    And sorry to ask again, but why would these issues only happen in Chrome? I’m trying to learn more about web design and front-end development and it would be good to learn from my mistakes.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    but why would these issues only happen in Chrome?

    Different browsers read websites differently. I didn’t check the issue in any other browser than Chrome, but if you had, then that’s odd. I’ve not known an issue to occur solely in Chrome.

    You didn’t make a mistake here. The theme has a bug, probably caused from a recent update.

    Basskoch

    (@basskoch)

    10 years, 12 months ago

    Hey Andrew.

    I have the same problem with “Landscape”.

    When I use:

    .main-navigation ul li {
    float: left;
    }

    I get the same padding problem as jztaddwater. But when I use:

    .main-navigation ul li:after {
    margin: 0;
    }

    the problem returns. Am I doing something wrong?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 12 months ago

    It’s difficult to tell, may you provide a link to your website?

    Basskoch

    (@basskoch)

    10 years, 12 months ago

    Wow that was fast;0)

    http://praesentationsteknikdvd.dk/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 12 months ago

    I’ve tested adding;

    .main-navigation ul li {
float: left;
}

.main-navigation ul li:after {
margin: 0;
}

    To your site and can’t experience your issue [screenshot].

    Perhaps you’re not adding the CSS in the correct place. Have you downloaded and installed the Custom CSS Manger or Custom CSS-type plugin?

    Basskoch

    (@basskoch)

    10 years, 12 months ago

    I placed it wrong:0) It works fine!

    Thank you very, very much! It was a great and fast help:0)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 12 months ago

    You’re welcome 🙂

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘Navigation Bar Glitching’ is closed to new replies.