Navbar not displaying correctly while scrolling

  • Resolved JanWest

    (@janwest)


    9 years, 2 months ago

    Hi guys,

    I have gotten my navigation bar to display the way I want before I start scrolling but when I scroll everything goes out of whack.

    Here are images of the navbar

    And here is the code I used in Siteorigin CSS.

    .site-header .home-link img {
  max-height: 140px;
  max-width: 208px;
  padding: 5px;
 }

 #navbar .navbar {
  padding-top: 25px;
 }

 #masthead.site-header.fixeddiv {
  max-width: 90%;
  left: 5%;
  right: 5%;
  padding: 0px;
 }

 .site-header.fixeddiv .home-link img {
  max-height: 140px;
  max-width: 208px;
  padding: 5px;
 }

 #navbar .fixeddiv .navbar {
  max-height: 140px;
  max-width: 208px;
 }

    Any help will be welcome. Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Without a live link it’s very difficult to give specific advice. We understand about local and staging sites, but that’s the way it is.

    It appears that the header’s box model is smaller than its contents. Use your browser’s CSS inspection tool to try various combinations of height rules and distances, including auto distance. Also ensure the selector you’re inspecting actually has an effect by toggling some obvious style off and on. All just basic CSS debugging steps of course. It’s about all I can offer without a live link. Good luck!

    Thread Starter JanWest

    (@janwest)

    https://sej-showandtell.siterubix.com/

    I set up a quick demo site you can refer to.

    Ask if you need to know anything

    Moderator bcworkz

    (@bcworkz)

    Cool, thinks for doing that! I’m not quite sure what you mean by out of whack when viewing the demo, it doesn’t behave quite like the image you posted earlier. Other than the logo being too small, there is no glaring issue. Adjusting some height rules will improve the appearance.

    The selector for the fixeddiv height is .site-header.fixeddiv .home-link
    It appears at line 1201 of your theme’s style.css

    The logo size is controlled by the selector immediately below, which is .site-header.fixeddiv .home-link img

    Adjust the various height rules to suit. Try height: 120px; for the fixeddiv and max-height: 120px; for the image for starters.

    I’m assuming the loss of the grey contact info bar on scroll is intentional. I hope these work on your actual site and not just the demo.

    Thread Starter JanWest

    (@janwest)

    And you are a genius! Thanks a lot my man. I will call on you in the future.

    Thread Starter JanWest

    (@janwest)

    Forgot to close it as resolved

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Navbar not displaying correctly while scrolling’ is closed to new replies.