- This topic has 29 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
I added an image of a deckled edge torn paper beneath my sticky nav header and would like to know how to make it part of the nav so the entire torn edge scrolls. (I want my logo to be on top of the image, which would make the header half the height it is now.)
Customer Support
Hi Michelle,
Can you try adding this through Appearance > Customize > Additional CSS?:
.gb-container.gb-container-05c87ebf { position: fixed; top: 20px; z-index: 1000; width: 100%; } .sticky-enabled nav.main-navigation.is_stuck { box-shadow: unset; } nav#site-navigation { z-index: 1001; position: relative; }Is this what you’re looking for?
YES! That is nearly perfect! I’d like the deckle to be higher (less padding between the sticky nav and the deckle)
Thank you!
If you try reducing the
20pxpadding from the code, does that work?I think it looks nice. The right side shows the straight line of the bottom navigation header a bit, but I can play with it more tomorrow to see if I can hide that more. Thanks again. 😊
You’re welcome, Michelle!
I just noticed that on scroll, the header stretches and has a transparent strip on the top:
Any ideas how to fix this?
Customer Support
Can you link us to your site and provide login?
Here it is (below)
I was able to get rid of the transparent strip at the top by tweaking the opacity on the header background, but the issue of the header stretching on scroll is still there.
I think it would look better to make the logo larger, but I’m not sure how to do that with an svg image
I’m not seeing the header stretching issue.
You can control the logo height at customizer > layout > primary navigation > Menu Item Height.
I’m having a challenge. When I set the opacity of the navigation background in Customizer Colors to full white, the header covers part of the deckled edge.
When I set the navigation background in Customizer>Colors>Navigation Background to transparent, the decked edge shows nicely, except then there is a transparent strip on the top
Also, on scroll, this is what happens:
I took the site off of Maintenance Mode so you can see it.
If I may suggest, I will add the background image directly to the navigation:
nav#site-navigation:before,#sticky-navigation:before { content:""; position: absolute; top: 100%; width: 100%; height: 50%; background-image: url(https://your-domain.com/wp-content/uploads/2023/01/13023741/Final-deckle-copy.png); background-position: center center; background-size: 100%; background-color:transparent; background-repeat: no-repeat; }And you need to properly crop the image.
I added the code and the deckled edge was no longer sticky. (I changed the transparent setting in Customizer>Colors>Navigation Background to #ffffff and that took care of the transparent issue.)
I added the code and the deckled edge was no longer sticky.
The container with the image needs to be removed.
And the CSS is not working as you didn’t change the background image URL, to protect your site’s privacy, I used
your-domainin the CSS instead of your site’s real domain.
- You must be logged in to reply to this topic.
