elementor stretch, image in nav with text

also... if i do set the template to the full width theme setting, i lose the header image i have built with elementor? how to stretch and get the header to stay?

Hi there,

Is this the page I'm supposed to be looking at?
https://www.screencast.com/t/25T4pcvgI

If so I don't see any GP elements there - it's all coming from Elementor.

oh dang. i forgot we have a maintenance door on it. one sec and i'll get you a login. thanks. thanks for blurring the name.

access info attached. secret is good for 7 days and can only be viewed once.

Hi Sparkle,

Can you try removing this code first from your stylesheet?:

section.elementor-section-stretched
 {left: initial!important;width:100vw!important;}

It sees to be breaking the layout.

Then, once you've removed that, let us know, and we'll go from there.

*lol* ok. i had that in there because it seemed to fix the same issue on another page. now i can't find that issue either. hopefully this is just going to be the last you hear on this from me. sorry. thank you.

do you have any advice on algining the navigation text item?

I see. You're welcome Sparkle.

For reference, can you re-share the link to the site in question? How are you specifically wanting to align the navigation text?

sure. the site is here https://karinabheart.com/

you have to log in to get past the maintenance door. use the credentials to view if you need deeper access, let me know.

the first nav item has an image plus text. best case scenario, i want to align the text to match the bottom line of the other button text. middle aligning the text could also work.

i also am working on some drop shadow on those navigation items and it doesn't apply to the search and cart icons. why?

oh! and my top-bar! why oh why won't it float above the header?

Thank you.

1. To align the nav-items, try adding this through Appearance > Customize > Additional CSS:

div#primary-menu > .menu {
    align-items: flex-end;
}

2. For the drop shadow, I can't seem to notice one applied to the nav-items on hover. Can you try clearing any caching mechanism you have to ensure we are seeing the same nav?

However, here's a CSS you can try to add a shadow to the nav-items and the menu bar items:

div#primary-menu > .menu li a:hover {
    text-shadow: 1px 1px 4px #fff;
}

.menu-bar-items .menu-bar-item a:hover svg {
    filter: drop-shadow(3px 5px 2px rgb(255 255 255 / 40%));
}

3. The top-bar is floating above the header viewing your site from my end. How exactly are you seeing it? Can you take a screenshot?
Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

thank you. that definitely lined the text up. do you have suggestions to get the image now middle aligned to the text vertically?

oh. i guess it's not exactly right still.... the gp icons at the end (cart, search) aren't alinged anymore. :(

I see. If you want to align the image as well, replace the code in #1 here: https://generatepress.com/forums/topic/elementor-stretch-image-in-nav-with-text/#post-2407233

with this:

div#primary-menu > .menu {
    align-items: center;
}

div#primary-menu > .menu > li:first-of-type a {
    display: flex;
    align-items: center;
}

With regards to the GP icons how do they look from your end? They seem aligned as they was before to me. Can you send a screenshot for reference?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

oh we are getting so close. now the gp icons line up (as does the logo icon!) but they don't have the shadow applied. %D

https://imgur.com/GW7lHOd