WordPress.org

Ready to get started?Download WordPress

Forums

Landscape
[resolved] Navigation Bar Glitching (18 posts)

  1. jztaddwater
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  5. jztaddwater
    Member
    Posted 1 year ago #

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

  6. Andrew
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

    Instead of that style I recommended, try this;

    .main-navigation ul li:after {
     margin: 0;
    }
  9. jztaddwater
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  13. Basskoch
    Member
    Posted 1 year ago #

    Wow that was fast;0)

    http://praesentationsteknikdvd.dk/

  14. Andrew
    Forum Moderator
    Posted 1 year 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 1 year ago #

    I placed it wrong:0) It works fine!

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

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    You're welcome :)

  17. Andrew
    Forum Moderator
    Posted 1 year 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 1 year 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