Okay
  Public Ticket #3679274
Centered Logo Menu Header
Closed

Comments

  • jpm96744 started the conversation
    July 3, 2024 at 7:30pm

    I'm not sure why when I scroll down, the menu items condense together behind the shrunken logo. I just want the logo to shrink and still have the menu items on the sides

  •  5
    WpWebSol | Ramzan Sharef replied
    July 4, 2024 at 4:50am

    Hi Jpm96744, Could you please post link of your website or any screenshot?

    If you don't want to condense the header with menu you can do this by turned off Header Resized on Scroll option From Salient > Header Navigation > Animation Effects 


    Check out the screenshot. 

    4396279125.png


  •  1,882
    Judith replied
    July 4, 2024 at 6:02am

    Hi Ramzan,

    Thanks for writing in!

    @Jpm96744, please let us know whether the response was helpful to you.

    I look forward to your response.

  • jpm96744 replied
    July 8, 2024 at 10:22pm

    https://bighornconstruction.net/

    I do want the header to shrink but I want there to still be space between the shrunken logo and the menu links when I scroll down

  •  1,882
    Judith replied
    July 9, 2024 at 6:26am

    Hi there,

    Thanks for writing back.

    Adjust the spacing by adding a padding value here:

    1660874831.png

    I truly hope this proves helpful for you. Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out. 

    Best regards,

  •  1
    jefffreedman replied
    July 11, 2024 at 12:30pm

    I have the same issue.

    Your instructions show the input field for size to shrink the logo, not padding around the shrunken logo, which is what is needed. The more I reduce the size of the logo, the closer the menu items get together, overlapping the logo and looking terrible.

    4839797732.png

    How can I adjust the padding on the left and right of the logo so the menu items remain legible when the header shrinks on scrolling?

    Thanks

  •  2,967
    Andrew replied
    July 11, 2024 at 1:52pm

    Hi jpm76744,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .small-nav .menu-item-with-margin {
  margin-right: 79px!important;
}

    @Jeff could you please share your site URL so we can check this out for you? You can also try adding the above CSS and see if this resolves your issue.

    We look forward to your reply.

    Thanks,

  •  1
    jefffreedman replied
    July 11, 2024 at 2:16pm

    Andrew-

    Thanks for the quick response. I tried that CSS but I'm still seeing the overlap. Here is the URL: https://citysprings.wpenginepowered.com/

    Thanks

  •  2,967
    Andrew replied
    July 11, 2024 at 3:05pm

    Hi Jeff,

    Thank you for getting back to us.

    You can replace the previous CSS with this one below to fix this issue.

    .small-nav .menu-item-with-margin {
    margin-right: 200px!important;
}

    Try this and let us know how it goes.

    Cheers,

  •  1
    jefffreedman replied
    July 11, 2024 at 3:36pm

    Hi Andrew-

    That was the solution. Thank you so much for your help. I hope this helps others as well.

  •  2,967
    Andrew replied
    July 11, 2024 at 3:48pm

    Hi Jeff,

    Thank you for reaching out to us.

    I'm happy that we could assist you! If you've enjoyed Salient, be sure to check out Nectarblocks, our latest innovation for building websites visually with WordPress.

    Your feedback is valuable to us and greatly appreciated!

    Kind regards,