Elementor Transparent and Sticky Navigation

Hi Ben,

1. Your menu items are really tall. You can adjust this in Customize > Layout > Primary Navigation.

You can also give your navigation a background color in Customize > Colors > Primary Navigation. Then to make it transparent when necessary, do this: https://docs.generatepress.com/article/merging-header-navigation-content/

2. I've heard from users that they sometimes need to "un-merge" the header and content in order to edit the top sections in Elementor. This is something I'm trying to find a solution for.

Thanks, Tom!

1. Ok cool. So I had it set to 90px because that was the position I wanted it on the page and the size of the logo (I had pulled that 90 from the css of my previous site). I set it to 20px and that looks about right when I compare the CTA buttons, but now it's all the way at the top of the page and my SVG logo has disappeared - I currently have

.site-logo img {
width: 200px;
}

in my style.css file. Do I need to add or change something else to push that down?

2. That works. Thank you!

Try this:

.main-navigation .navigation-logo img {
    width: 200px;
    height: auto;
}

Thank you! That brought back my logo. Is there a way to move the logo and the navigation down a bit on the page? Right now it's at the very top of that page. The only way I've been able to move it down is with the line-height or padding, but both of those make the buttons huge again. I really appreciate your help!

Try this:

@media (min-width: 769px) {
    #site-navigation {
        margin-top: 10px;
    }
}

Thank you, Tom. I was able to get my main navigation sorted out. However, the sticky navigation's background is not going full width. Here are a couple of screenshots:

Transparent (looks good): https://www.dropbox.com/s/aw0z1t5snqcbl80/transparent_menu.jpeg?dl=0

Sticky (I'd like the blue to extend full width but the menu to sit where it is): https://www.dropbox.com/s/v851w3ux0cjatle/sticky_menu.jpeg?dl=0

Thanks!

Is the page header container type set to Full width?

What about the navigation width (Customize > Layout > Primary Navigation)?

The page header container was set to full width.

The navigation width in primary was set to contain. I changed that to full-width which gives me a full-width sticky background - but my navigation items are on the edges of the screen. Can I move them back to where they were without losing the full-width bg?

https://www.dropbox.com/s/d89utbuxruvf0zx/navwidth_full.jpeg?dl=0

Is the inner navigation width set to contained?

Facepalm. Thank you! That was exactly what I was looking for.

You're welcome :)