- This topic has 7 replies, 3 voices, and was last updated 4 years, 8 months ago by Leo.
-
AuthorPosts
-
July 8, 2019 at 9:30 am #952208Christine
Hi,
My Website link is https://staging.gartersandco.com.au/
On desktop i want to replace the positions of Cart Icon and search icon. (http://prntscr.com/oc7ka8)On Mobile I want to fix the overlapping issue of these icons. (http://prntscr.com/oc7kui)
Please let me know how his can be achieved.
Regards
July 8, 2019 at 9:52 am #952226DavidStaffCustomer SupportHi there,
try this CSS to re-order the cart and the search icons:
.main-navigation li.wc-menu-item { order: 20; }
Can you flush and disable your cache so i can see whats causing the icons to overlap on mobile?
July 9, 2019 at 10:32 am #953174ChristineHi, this worked like a breeze. Thank you.
How I Can flush and disable my cache?July 9, 2019 at 11:03 am #953205DavidStaffCustomer Supportits the autoptimize plugin – there is an option in the Admin Bar menu to flush the cache, and then you can deactivate autoptimize from the Plugins menu
July 10, 2019 at 2:56 am #953756ChristineHi,
I have flushed. Please check on it and update me.
July 10, 2019 at 7:05 am #953916DavidStaffCustomer SupportWe need you to flush it and then disable the plugin – its advisable to leave autoptimize off altogether when building/customizing a site. Let me know
July 19, 2019 at 7:56 am #962032ChristineHello,
Please see the header of my website. http://prntscr.com/ohcpli
I have flushed the cache, and then deactivated the autoptimize Plugin.Still the search bar is coming to the center.
.footer-widgets { background-color: #d2d2d2; } /* GeneratePress Site CSS */ .inside-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-widget { order: 10; overflow: visible; } .nav-float-right .header-widget { top: auto; } .top-bar{ background-color:#fff; } .nav-float-right .header-widget .widget { padding-bottom: 0; } .site-branding, .site-logo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 200; } button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) { border: 1px solid transparent; } button.ghost, html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost, a.button.ghost:visited, a.wp-block-button__link.ghost:not(.has-background) { background: transparent; color: inherit; border-color: inherit; } button.ghost:hover, html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, a.wp-block-button__link.ghost:not(.has-background):hover { background: transparent; color: #1e73be; } .hero-buttons > * { margin: 10px; } .widget-area .widget_search { padding: 0; } #mobile-header .mobile-bar-items { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin-left: auto; } .no-sidebar .inside-article > *, .no-sidebar #comments, .no-sidebar .nav-links { /* max-width: 700px; */ margin-left: auto; margin-right: auto; } .no-sidebar .generate-columns-container .inside-article > * { max-width: none; } .nav-links > * { padding: 5px 15px; border-width: 1px; border-style: solid; border-color: inherit; } .entry-content .happyforms-flex { padding: 0; } #site-navigation { float: none; width: 100%; } .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-navigation .menu-item-separator { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .main-navigation .menu-item-separator a { font-size: 0; background: transparent !important; } .slideout-navigation .menu-item-separator, .main-navigation.toggled .menu-item-separator{ display: none !important; } .site-header .header-image { width: 330px; } .main-navigation, .main-navigation ul ul { background-color: #fff; font-family: "Quicksand",Sans-serif; } /** Start Envato Elements CSS: Wedding Photography (157-3-a030ce61108067b66e77c040f2369150) **/ .envato-kit-161-caption figcaption{ margin-top: -40px; } .envato-kit-161-fbox .elementor-flip-box__back{ padding: 10px; } .envato-kit-161-fbox .elementor-flip-box__back .elementor-flip-box__layer__overlay{ background-color: rgba(255,255,255,0.91) } .envato-kit-161-slideshow .elementor-main-swiper{ height: 85vh !important; } .envato-kit-161-tabs .elementor-tabs{ text-align: initial; } .envato-kit-161-tabs .elementor-tab-title{ border-radius: 4px; } .menu-toggle:before { color: #efb2a7; } .menu-toggle .mobile-menu { padding-left: 3px; display: none; } button.menu-toggle:hover, button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus { color: #efb2a7; } .main-navigation li.wc-menu-item { order: 20; } div#wps-slider-section img.wpsf-product-img { border: none !important; } .navigation-search.nav-search-active { left: auto; width: 300px; top: 100%; padding: 20px; background: #fff; } .navigation-search.nav-search-active input { border: 1px solid #ddd; border-radius: 5px; height: auto; } .navigation-search { top: 150%; transition: opacity 300ms ease-in-out, top 300ms ease-in-out; left: auto; } .navigation-search.nav-search-active .search-button { position: absolute; right: 30px; top: calc(50% - 15px); height: 30px; display: block; content: "\f002"; font-family: GeneratePress; opacity: .5; width: auto; background: transparent; color: #000; border: 0; padding-left: 5px; padding-right: 5px; } @media (max-width: 768px) { .site-header { display: none; } }
this is my complete CSS.
Also I am Looking for the mobile design like
Menu on left and Search and cart icon at right. then Logo on next row.(http://prntscr.com/ohcslz) and when menu clicked then like this: http://prntscr.com/ohcswhLooking forward!
Regards
July 19, 2019 at 9:12 am #962091LeoStaffCustomer SupportTry this CSS to fix the overlapping issue:
#mobile-header .mobile-bar-items.wc-mobile-cart-items { margin-left: 0; }
-
AuthorPosts
- You must be logged in to reply to this topic.