[Resolved] Sticky navigation loses style when adding ajax search in primary navigation

[José]

Hello, I added AJAX Search for WooCommerce in the Primary Navigation with the following css

@media (min-width: 768px) {
#site-navigation .inside-navigation {
position: relative;
display: flex;
}
div.asp_m.asp_m_1 {
position: absolute;
bottom: 0;
right: 0;
top: auto;
}
}
.dgwt-wcas-search-wrapp{margin: auto;box-sizing:border-box}

The problem is when you apply the sticky navigation, I go through the site, change to two rows and lose the style.

Thanks for the help

image
attached image

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Give this a shot:

@media (min-width: 768px) {
    #site-navigation .inside-navigation, #sticky-navigation .inside-navigation {
        position: relative;
        display: flex;
    }
    div.asp_m.asp_m_1 {
        position: absolute;
        bottom: 0;
        right: 0;
        top: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

Hello Leo, thanks for your attention. The ccs that sent me work correctly when walking the site, but have a detail when it comes back up: jump (a separation) before it reaches its original position, I do not know where the separation comes from … if you have any idea .. .

Thank you

Image

I send you input data from the site
username: support
Password: abcd

[Tom]

Instead of this:

#site-navigation .inside-navigation, #sticky-navigation .inside-navigation {
    position: relative;
    display: flex;
}

Try this:

.main-navigation:not(.slideout-navigation) .inside-navigation {
    display: flex;
    position: relative;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[José]

It works perfect.

Thank you

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts