- This topic has 87 replies, 4 voices, and was last updated 3 weeks, 3 days ago by
Fernando.
-
AuthorPosts
-
June 9, 2022 at 9:14 pm #2248850
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.
June 9, 2022 at 9:20 pm #2248852Fernando Customer Support
I see. Kindly try adding this CSS:
.header-wrap { z-index: 10000; }
Hope this helps!
June 9, 2022 at 10:47 pm #2248873robchanoi
Actually – the nav is still left and search right – I didn’t look properly, the nav top left still opens top right.
June 9, 2022 at 11:05 pm #2248884Fernando Customer Support
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.
June 9, 2022 at 11:16 pm #2248890robchanoi
Gosh sorry – it appears to all be working fine now – thanks for bearing with me mate.
June 9, 2022 at 11:17 pm #2248893Fernando Customer Support
No worries! Glad it’s all working now! You’re welcome Robchanoi!
July 18, 2022 at 8:39 am #2286405robchanoi
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; }
July 18, 2022 at 7:22 pm #2286814Fernando Customer Support
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!
July 19, 2022 at 9:33 pm #2288031robchanoi
Thanks Fernando – been having site troubles – will get back to you shortly on this,
July 24, 2022 at 1:21 am #2291804robchanoi
Thanks mate, that worked.
July 24, 2022 at 1:32 am #2291808robchanoi
Actually – how to disable primary nav on mobile – have canvass menu set just for mobile.
July 24, 2022 at 2:02 am #2291822robchanoi
changed menu mobile breakpoint to 800 – seem to fix it.
July 24, 2022 at 5:07 pm #2292474Fernando Customer Support
I see. Glad you were able to achieve it!
-
AuthorPosts
- You must be logged in to reply to this topic.