WordPress.org

Forums

Landscape
[resolved] Navigation Bar Glitching (18 posts)

  1. jztaddwater
    Member
    Posted 2 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!

  2. Andrew
    Nuh uh moderator
    Posted 2 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.

  3. jztaddwater
    Member
    Posted 2 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!

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  5. jztaddwater
    Member
    Posted 2 years ago #

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

  6. Andrew
    Nuh uh moderator
    Posted 2 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;
    }
  7. jztaddwater
    Member
    Posted 2 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!

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Instead of that style I recommended, try this;

    .main-navigation ul li:after {
     margin: 0;
    }
  9. jztaddwater
    Member
    Posted 2 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.

  10. Andrew
    Nuh uh moderator
    Posted 2 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.

  11. Basskoch
    Member
    Posted 2 years 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?

  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  13. Basskoch
    Member
    Posted 2 years ago #

    Wow that was fast;0)

    http://praesentationsteknikdvd.dk/

  14. Andrew
    Nuh uh moderator
    Posted 2 years 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?

  15. Basskoch
    Member
    Posted 2 years ago #

    I placed it wrong:0) It works fine!

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

  16. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    You're welcome :)

  17. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Actually, I wasn't paying attention to what I said before.

    You only need this style;

    .main-navigation ul li:after {
     margin: 0;
    }
  18. Basskoch
    Member
    Posted 2 years ago #

    Even better;0) Thank you so much:0)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic