[Resolved] Sticky svg header logo too small

Home Forums Support Sticky svg header logo too small

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #328895
    Suzanne

    Hi, I am using an svg file for my logo. The logo is the correct size before scrolling, however when the sticky nav kicks in, the logo is very tiny. I’ve done so many modifications, I’m lost as to how to make the logo an appropriate size.

    Here is the correct unscrolled logo view: Unscrolled Logo proper size

    Here is the sticky scrolled logo view: Sticky small logo view

    Here is a link to my site: My site

    Thanks for your thoughts,
    Suzanne

    GeneratePress 1.3.46
    GP Premium 1.3
    #328898
    Leo
    Staff
    Customer Support
    #328909
    Suzanne

    Hi,
    I’ve added & activated the plugin, uploaded my logo via Customize > Site Identity, and set the size to the actual larger size in my css, and the logo is still very small.

    any other ideas?

    Thanks.

    #328914
    Leo
    Staff
    Customer Support

    Ahh it’s getting overwritten. Try this:

    .site-logo img {
        width: 312px !important;
        height: 90px !important;
    }
    #328920
    Suzanne

    It worked! Thank you! The logo is an appropriate size for sticky nav, however now the nav is not centered horizontally with the logo. The nav seems to be bumped up vertically aligning top?

    How can I keep logo and nav bar centered on each other? updated site

    #328923
    Leo
    Staff
    Customer Support

    I assume you meant centered vertically?

    You can adjust the padding with the CSS you’ve already added:

    .main-navigation {
       padding-top: 25px;
    }
    #328978
    Suzanne

    Yes, sorry, centered vertically.

    I am having trouble determining which element to apply the padding for the sticky nav.

    I have padding-top for the nav which affects the “non-sticky” state and displays as I would like , however when I scroll down and the sticky nav renders, the padding-top is not correct. THe padding is over the entire row (logo and nav), not just the nav.

    Hope you can understand my description…

    #328980
    Leo
    Staff
    Customer Support

    Ok let’s try changing your original code to this:

    .main-navigation:not(.navigation-stick) {
        padding-top: 25px;
    }

    Then adjust the sticky navigation height in Customizer > Layout > Sticky Navigation > Menu Item height

    #328983
    Suzanne

    Hi,
    that actually didn’t work, but I figured it out. The class that should be adjusted is .main-nav not .main-navigation. As in:

    .main-nav {
    padding-top: 25px;
    }

    Thank you so much for the timely support.

    #328984
    Leo
    Staff
    Customer Support

    Glad it’s working 🙂 You’re welcome!

    #328992
    Suzanne

    Actually experiencing an additional problem with the sticky nav …

    The dropdown nav in sticky state is now up too high/ overlapping the main nav text.
    What should I adjust?

    My site

    #328995
    Leo
    Staff
    Customer Support

    Can you try my way here again? https://generatepress.com/forums/topic/sticky-svg-header-logo-too-small/#post-328980

    Leave the code in so I can see why it isn’t working 🙂

    #329006
    Suzanne

    Okay, I made the changes you suggested. Put in 75 for the height because it is still not pushing it down enough for my liking to be vertically centered.

    Now the sticky nav dropdowns are now located way below the main nav text.

    Seems to be a tradeoff of pushing the main nav down with the height adjustment vs the location of the dropdown nav.

    Hmmm

    #329009
    Leo
    Staff
    Customer Support

    Ok reduce the sticky navigation menu item height again, then try something like this:

    .main-navigation.sticky-navigation-transition .main-nav > ul > li > a {
        padding-top: 25px;
    }

    by the way, looking at your current layout, this might also be a good option for you:
    https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    #329027
    Suzanne

    Looks like it’s all working now! Thank you!

    What is the benefit and/or difference using the “navigation as header option”?

    Consequently, the client has changed their mind and now wants a third column in the header between the logo and the nav so I will be working on that next! Would the “navigation as header option” still be beneficial?

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.