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

Thank you. It's working fine except not on header images - pls see link below and try the search/logo/nav - all click thru to header link.

I see. Kindly try adding this CSS:

.header-wrap {
    z-index: 10000;
}

Hope this helps!

Actually - the nav is still left and search right - I didn't look properly, the nav top left still opens top right.

Did you remove this code which we previously had?:

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
}

To clarify, are you still wanting the menu icon at the right and the search icon at the left? If so, you’ll need that code.

Kindly let us know.

Gosh sorry - it appears to all be working fine now - thanks for bearing with me mate.

No worries! Glad it’s all working now! You’re welcome Robchanoi!

Hi,

Apologies for resurrecting this one. This doesn't strictly relate to search box but it is part of the set up.

I would like to just have the canvas panel on mobile and have the menu horizontal on desktop - the standard look.

I am following Leos video on YT https://www.youtube.com/watch?v=AgcCmqizaKg&ab_channel=GeneratePress but because I previously requested the canvas panel on desktop you had kindly given me css to achieve this but now I believe that this css is inhibiting me setting this up.

I'm not quite sure what I should delete so I have included all the css I have below in both simple and additional css.

Do you think you'd kindly be able to advise what I should remove so I may proceed with setting up desktop horizontal menu navigation.

Thanks so much.

Simple css

.woof .irs-from, .woof .irs-to, .woof .irs-single {
background: #ff4747;
}

.woof .irs-bar {
background: linear-gradient(to top, rgb(255, 104, 1) 0%,rgb(255, 104, 1) 100%);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background-color: #FFFF00;
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color: #FFFF00;
}

@media (max-width: 768px) {
    .inside-header {
        display: flex;
    }
    .main-navigation {
        margin-left: auto;
    }
}

blockquote {
      font-family: arial;
      font-size: 19px;
      font-weight: 400;
      font-style: italic;
}

.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-size: 1.00em;
}

.woocommerce span.onsale {
  font-family: 'Neue Haas Unica';
}

.wp-show-posts-image img {
    border-radius: 10px;
}

.single-post #page {
    z-index: 2;
    position: relative;
}

.single .inside-article {
    max-width: 800px;
    margin: 0 auto;
}

.snippet-label-img {
    width: auto;
}
.snippet-title {
    padding: 0px;
}

div#snippet-box {
    margin-left: 30%;
}

#generate-slideout-menu .inside-navigation {
    padding-top: 30px;
    padding-bottom: 30px;
}

#generate-slideout-menu.offside {
    height: auto;
}

.offside--right.is-open, .offside-js--is-right .offside-sliding-element {
    transform: translate3d(-320px,0,0);
}

.main-navigation.offside {
    width: 320px;
}

.offside--right {
    right: -320px;
}

p {
    letter-spacing: -0.02em;
}

aside.FixedWidget__fixed_widget {
    top: 100px !important;
}

@media (max-width: 768px) {
    .inside-left-sidebar aside#text-10 {
        position: static !important;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
}

Additional css

ul#menu-menu-2 {
    display: flex;
    justify-content:space-between;
}

.inside-header.grid-container.grid-parent {
    position: relative;
}
.header-wrap .site-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
}

.header-wrap {
    z-index: 10000;
}

.inside-right-sidebar aside.widget {
    background-color:#fff;
}

.inside-right-sidebar .gb-query-loop-item.post {
    margin: unset;
}

Hi Robchanoi,

Try removing these:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
    }
    .main-navigation {
        margin-left: auto;
    }
}

and

ul#menu-menu-2 {
    display: flex;
    justify-content:space-between;
}

.inside-header.grid-container.grid-parent {
    position: relative;
}
.header-wrap .site-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
}

.header-wrap {
    z-index: 10000;
}

This should set the header and search back to default.

Hope this helps!

Thanks Fernando - been having site troubles - will get back to you shortly on this,

Thanks mate, that worked.

Actually - how to disable primary nav on mobile - have canvass menu set just for mobile.

changed menu mobile breakpoint to 800 - seem to fix it.

I see. Glad you were able to achieve it!