[Support request] Placing header search box to right of menu which features in middle

Home Forums Support [Support request] Placing header search box to right of menu which features in middle

Home Forums Support Placing header search box to right of menu which features in middle

Viewing 15 posts - 61 through 75 (of 88 total)
  • Author
    Posts
  • #2243279
    robchanoi

    Hi – as per recent messages, canvass menu set to left side not closing – pls see below.

    Also, header logo is now barely clickable on desktop, may be tablet/mobile also.

    Tks

    #2243904
    David
    Staff
    Customer Support

    What changes have you recently made that has added the black block on your page ?

    #2243905
    David
    Staff
    Customer Support

    What changes have you recently made that has added the black block on your page ?

    #2243964
    robchanoi

    The changes that were recommended on this thread. To align nav top left – this is what creates the black block.

    #2244494
    Fernando
    Customer Support

    Hi Robchanoi,

    Can you try setting setting it to left temporarily once more, and I’ll see what’s occurring?

    Kindly let us know once you’ve done so.

    Hope to hear from you soon.

    #2247029
    robchanoi

    Hi – sorry, missed your last update – cld u kindly advise when you are ready to take a look and I will set to left.
    Header logo no longer clickable also.

    Thank you.

    #2247774
    Fernando
    Customer Support

    For the logo, can you go to Appearance > Customize > Additional CSS and look for this code:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    Then, kindly replace it with this one:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    Then, for your menu, you can change it back and I can take a look today whenever you’re ready as well.

    Hope to hear from you soon!

    #2247833
    robchanoi

    Thanks Fernando on the logo being clickable again but the canvass menu is jutting out with it enabled left – pls see site.

    #2247843
    Fernando
    Customer Support

    It’s caused by a plugin conflict with Lightweight Grid Columns I think.

    Can you try #1 here to be sure?: https://docs.generatepress.com/article/debugging-tips/

    It would be good to take a backup of your site before doing so.

    Kindly let us know how it goes!

    #2247860
    robchanoi

    Hi,

    I don’t have the time right now to go through that process so I will return it to nav right search left on desktop – to confirm I should erase the additional css and do something else? as I have tried this but no joy – here is what I have in add css:

    ul#menu-menu-2 {
        display: flex;
        justify-content:space-between;
    }
    
    .inside-header.grid-container.grid-parent {
        position: relative;
    }
    
    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    nav#site-navigation {
        width: 100%;
    }
    
    @media (max-width: 768px) {
           li.search-item {
            order: -1;
       

    Thanks

    #2247874
    Fernando
    Customer Support

    Yes, there’s a conflicting CSS coming from a third party plugin which seems to be causing the issue when you set the Off Canvas menu to left.

    You may keep that CSS if you want your menu at the left, the logo in the middle and the search icon at the right.

    You’re code is missing the z-index though which I mentioned recently.

    This one:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    Should be this:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    Hope this clarifies.

    #2247881
    robchanoi

    Hi,

    I have changed the add css as above but the left canvass menu still jutting out.
    I will return it to – nav right search left on desktop – to confirm, which part of the add css should I remove pls?

    #2247887
    Fernando
    Customer Support

    To clarify, do you want to move the Menu button back to the right as well?

    These CSS alter the look of your Header where the Menu Button, Logo and the Search Icon. If you prefer the menu button at the left, the logo at the middle, and the search icon at the left, you may keep all the code.

    Kindly let us know.

    #2247894
    robchanoi

    Yes – I would like to return the “menu button back to the right and search to the left on desktop” please so the canvass menu opens and closes properly as I do not have time to go through the process you sent me a link to.

    Are you saying this will not work either?

    #2247904
    Fernando
    Customer Support

    Thank you for clarifying. It will work. You can replace the code you have with this:

    ul#menu-menu-2 {
        display: flex;
        justify-content:space-between;
    }
    
    .inside-header.grid-container.grid-parent {
        position: relative;
    }
    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }
    
    nav#site-navigation {
        width: 100%;
    }
    
    li.search-item {
        order: -1;
    }
    
    li.search-item.menu-item-align-right.active.close-search {
        float:unset;
        position: absolute;
        right:0
    }

    Kindly let us know how it goes.

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