[Resolved] keep aligned primary menu to the right

Home Forums Support keep aligned primary menu to the right

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #856172
    José

    Hello, I continue to simplify the shopping experience on the shopping cart page and on the payment page.

    I inserted an ajax search bar through a hook in the whole site, I excluded the same bar in the cart page and in the payment page so as not to distract the client, by doing this, I could not keep the menu alienated to the right in the navigation bar. (attached image).

    I have the navigation location above header and Navigation Alignment on the right, but the logo and menu are left together. Question: can this modification be customized through layout, first navigation ?. o What is the most appropriate procedure to keep the menu aligned to the right on the cart and checkout page in the desktop view?

    P.D The mobile view looks perfect !!!

    image
    https://ibb.co/GP7KbCD

    Thank you.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #856249
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know ūüôā

    #857085
    José

    Hi Leo, of course, I copy username and password:
    wp@usuario.com
    5nnJZ2TZwJb1oVTqGSoPMrgx

    #857132
    Leo
    Staff
    Customer Support

    Which hook are you using to add the AJAX search currently and how are you positioning it in the middle?

    #857236
    José

    I execute shortcode inside_navegation
    more 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}

    //sticky style


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

    Could another hook be added just for the cart and checkout pages? adding an html space code?

    or is not it a good idea?

    #857387
    Leo
    Staff
    Customer Support

    Doable but definitely a bit complicated.

    It might take a few tries if you don’t mind?

    If so can you temporarily remove the CSS you’ve added and let me have a look?

    Thanks ūüôā

    #858456
    José

    Ok Leo, I already removed the css so you can have a look…

    Regards

    #858499
    Leo
    Staff
    Customer Support

    Give this a shot:

    .inside-navigation {
        display: flex;
    }
    .main-nav {
        margin-left: auto;
    }
    #858590
    José

    Leo, I inserted the CSS, and it works perfect.
    The same as the previous css … your idea is to replace it?

    take a peek

    regards

    #858620
    Leo
    Staff
    Customer Support

    Not quite sure what you mean?

    I’m not seeing the CSS being added currently.

    If it works then definitely add it ūüôā

    #858646
    José

    Leo, it works doing the same as the css I removed:

    @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}


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

    I replaced this CSS with:
    .inside-navigation {
        display: flex;
    }
    .primary-menu {
        margin-left: auto;
    }
    .dgwt-wcas-search-wrapp {margin: auto; box-sizing: border-box}

    But the menu still needs to be kept to the right? I send you an imegen …
    https://ibb.co/q9jTjTB

    Thank you

    #858652
    Leo
    Staff
    Customer Support
    #858659
    José

    I deleted my added css:

    .dgwt-wcas-search-wrapp {margin: auto; box-sizing: border-box}

    Added image

    https://ibb.co/nj71Wp4

    #858741
    Leo
    Staff
    Customer Support

    Can you try the edited CSS as mentioned above?

    #858759
    José

    Leo, I’m a bit confused, do you want me to add the first css?


    @media
    (minimum width: 768 px) {
    # site-navigation .inside-navigation {
    relative position;
    screen: bending;
    }
    div.asp_m.asp_m_1 {
    position: absolute;
    down: 0;
    right: 0;
    Above: auto;
    }
    }
    .dgwt-wcas-search-wrapp {margin: auto; box-sizing: border-box}


    @media
    (minimum width: 768 px) {
    .main-navigation: no (.slideout-navigation) .inside-navigation {
    screen: bending;
    relative position;
    }
    div.asp_m.asp_m_1 {
    position: absolute;
    down: 0;
    right: 0;
    Above: auto;
    }
    }

    At the moment the site is using this:

    .inside-navigation {
        display: flex;
    }
    .primary-menu {
        margin-left: auto;
    }

    Regards
    if you want you can have a closer look, you have access as administrator

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.