[Resolved] elementor stretch, image in nav with text

[sparkle]

i’m having trouble with the generatepress full width setting and elementor’s stretch section setting. what i used to do doesn’t seem to work any more. now when i try to stretch the background, it moves everthing to the right. i have been able to thwart it in a few places with css:

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

but it doesn’t always seem to work. is there some css you would recommend to get the image back in line with the left edge?

i searched a little and found the article that talks about setting the container to full width on the site / page. i’m pretty sure i have this all set properly but am still having issues stretching the background of the section. i don’t really want the content to push out to full width.

also… my very first nav item has an image with text. is there a way i can align those to the middle so the name is in the same horizontal line as the menu labels?

[sparkle]

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?

[Leo]

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.

[sparkle]

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.

[sparkle]

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

[Fernando]

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.

[sparkle]

*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?

[Fernando]

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?

[sparkle]

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?

[sparkle]

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

[Fernando]

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

[sparkle]

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

[sparkle]

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

[Fernando]

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

[sparkle]

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

[Author]

Posts