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

[robchanoi]

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.

[Fernando]

I see. Kindly try adding this CSS:

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

Hope this helps!

[robchanoi]

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

[Fernando]

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.

[robchanoi]

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

[Fernando]

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

[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;
}

[Fernando]

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!

[robchanoi]

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

[robchanoi]

Thanks mate, that worked.

[robchanoi]

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

[robchanoi]

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

[Fernando]

I see. Glad you were able to achieve it!

[Author]

Posts