[Resolved] Various: Transparent Header, Ajax Cart, Mobil Menu, Disable Elements, WooCommerc

Home Forums Support [Resolved] Various: Transparent Header, Ajax Cart, Mobil Menu, Disable Elements, WooCommerc

Home Forums Support Various: Transparent Header, Ajax Cart, Mobil Menu, Disable Elements, WooCommerc

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #634291
    pairfum

    Dear Forum Members,

    This is our live site which uses the BeaverBuilder Theme & Plugin:
    https://www.pairfum.com

    We are in the process of switching from the BB Theme to GeneratePress (but keeping the BB Plugin) and this is the staging site where we have installed GeneratePress to configure and test it first:
    https://staging.pairfum.com

    We now have the following questions to which we cannot find an answer:

    Mobile Menu:
    We have set sub-menu to drop down on hover for the desktop but on the mobile it looks like it requires a click/tap.

    Disable Elements:
    https://staging.pairfum.com/natural-home-fragrance/
    How can we side-wide disable the title / featured image / etc. on all ‘pages’ but not ‘archive’, ‘posts’ and ‘woocommerce’ pages? We would prefer it, if we did not have to edit every single page to disable the title etc.

    Transparent Header:
    https://staging.pairfum.com/
    We are using BeaverBuilder and we would like to make the header transparent to show the top image, without moving the container up. If we move the entire container up, then we cause problems on WooCommerce pages, e.g. ‘Cart’ slides under the header.

    Cart in Header:
    We have the cart icon in the header. Is there a way to add an Ajax drown down cart similar to this plugin:
    https://codecanyon.net/item/woocommerce-ajax-drop-down-cart/5048421

    Home Icon:
    https://staging.pairfum.com/
    We don’t want to activate Fontawesome, as it slows down the site. Is there another way how we can add a ‘home’ icon to the Primary Navigation next to ‘shop’?

    WooCommerce Single / Variable Product Tabs:
    https://staging.pairfum.com/product/reed-diffuser-refill/
    https://staging.pairfum.com/product/new-diffuser-refill-reeds-classic-long-diffuser-sticks/
    Can we add a line between the tabs to highlight each tab better? We prefer the look of the tabs on our live site.
    How can we left align the tabs? They seem to be centred.

    WooCommerce Cart:
    https://staging.pairfum.com/cart/
    How can we add a continue shopping button to the cart?

    WooCommerce Checkout:
    https://staging.pairfum.com/checkout/
    How can we show thumbnails beside the products?

    Blog Page:
    https://staging.pairfum.com/blog/
    How can we make the fields wider of our Newsletter Subscribe form? They are clearly wider on our live site.

    We would very much appreciate your help on these questions.

    Many thanks for taking the time to look into this.

    Kind regards,

    Pairfum London

    GeneratePress 2.1.3
    #634427
    Tom
    Lead Developer
    Lead Developer

    1. Mobile Menu

    Since there’s no hover functionality on mobile, especially requires a click (or a tap).

    2. Disable Elements

    To disable the title on all pages, you’ll need to use GP Premium 1.7, which is currently a release candidate: https://generatepress.com/gp-premium-1-7/

    To disable the featured image on pages, go to “Customize > Layout > Blog” and click on the “Page” section of the Featured Image area.

    3. Transparent Header

    GPP 1.7 has as option to place the header on top of the content below it. However, it can cause some issues as you pointed out. To counter that, we added a “Header height offset” option, which allows you to add the height of your header. This prevents any overlapping.

    4. Cart in Header

    Not by default in the theme. You’d need to use a plugin for now.

    5. Home Icon

    You would need to build your own icon font. You can do this using a tool like IcoMoon.

    Once you use their tool, they provide you with font files. Those font files need to be uploaded to your server, and then referenced in your CSS using @font-face. IcoMoon will actually provide the necessary CSS.

    6. WooCommerce Tabs

    This reply might help: https://generatepress.com/forums/topic/keep-original-woocommerce-styling-after-activiting-gp-woocommerce-module/#post-618323

    7. WooCommerce Cart

    This function should do it: https://gist.github.com/bradleysa/7d1448253097784daf94

    Or maybe a plugin like this: https://wordpress.org/plugins/continue-shopping-for-woocommerce/

    8. WooCommerce Checkout

    I can’t find any solid resources to do this. It may be worth asking WooCommerce directly – they might have a solution/know of a plugin.

    9. This CSS might help:

    .fl-module-content form input[type="text"], 
    .fl-module-content form input[type="email"] {
        width: 100%;
        margin-bottom: 10px;
    }

    Hope this helps! 🙂

    #634628
    pairfum

    Dear Tom,

    Many thanks for your tips & solutions.

    We will work our way through them.

    Kind regards,

    Pairfum

    #634664
    Tom
    Lead Developer
    Lead Developer
    #636135
    pairfum

    Hi Tom,

    We have now worked our way through your suggestions & solutions:

    Mobile Menu:
    In the ‘hover’ mode (desktop), the click/tap on the mobile menu means that the user immediately goes to the page url instead of opening up the sub menu. This obviously cannot be the intention. Do you have suggestion to solve this?

    Disable Elements & Transparent Header:
    Excellent. Do you know already when GP Premium 1.7 will be good to go for live sites?

    Cart in Header:
    We have restyled our existing Ajax floating side cart and it now works.

    Home Icon:
    Sorry, but do you have more detailed instructions for how we can use an SVG icon ?

    For now we have used these instructions but the icon disappears on some pages (e.g. Cart, Checkout, etc.):
    https://kb.wpbeaverbuilder.com/article/505-add-an-icon-to-a-menu-item

    WooCommerce Single / Variable Product Tabs:
    https://staging.pairfum.com/product/reed-diffuser-refill/
    https://staging.pairfum.com/product/new-diffuser-refill-reeds-classic-long-diffuser-sticks/
    The code that you posted in the link you provided does not seem to work. We have pasted into the GeneratePress Child theme and it doesn’t seem to do anything.

    WooCommerce Cart:
    https://staging.pairfum.com/cart/
    Excellent. Works well.

    The coupon code input field was not aligned / sized to match the apply button. This codes seems to fix this for us:

    .woocommerce-cart table.cart td.actions .coupon .input-text {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 43px;
    text-align: center;
    }

    Would you agree with this code or how would you change it?

    On another note, we noticed on the iPad that the product thumbnails for the items go missing in portrait mode.

    WooCommerce Checkout:
    https://staging.pairfum.com/checkout/
    We have dropped this for now, as it is a WooCommerce issue we can address later.

    We have noticed that the left-padding for the Stripe payment gateway ‘tick’ is 32px instead of the 20px that are being used for the Paypal gateway. On our live site, both payment gateways have 20px. Would you have a code snippet to adjust this?

    Blog Page / Contact & Subscribe Input Form Size
    Excellent. This works well.

    We have another subscribe form on this page, I noticed that the page is not set to ‘full width’ even though in Customiser all pages are set to ‘content (no sidebar)’ and only the blog and single post are set ‘content / sidebar’. Under ‘edit page’ the layout is set to default.

    Amazon Pay & Login
    https://docs.woocommerce.com/document/amazon-payments-advanced/

    We have an active merchant account for Amazon Pay but something does not seem to work on the Cart & Checkout pages:
    – on the cart page, the Amazon login / pay button is not available
    – on the checkout page, a placeholder is visible but the Amazon button is not visible.

    Can you see what is going wrong? It might be a problem of the plugin itself though.

    Desktop Header
    As the screen gets smaller, the logo slides above the navigation but the navigation is ‘right aligned’.
    Our settings in the Customiser are the following:
    – Navigation Alignment: center
    – Navigation Location: float right
    We have tried different settings but they don’t seem to work.

    Also, as the screen gets narrower, elements of the navigation slide onto a 2nd row, making the navigation row higher. Instead, the logo should slide above the navigation.

    We like & prefer how the Menu adjusts & aligns on our current live site (www.pairfum.com) as the screen gets narrower.

    Mobile Header:
    On the iPad in Portrait mode the header is very narrow/shallow. It is good in Landscape mode. Can we make the header higher/bigger initially but then shrink as you scroll?

    Our apologies for posting so many support questions.

    Many thanks for your help.

    Kind regards,

    Pairfum
    https://www.pairfum.com

    #636573
    Tom
    Lead Developer
    Lead Developer

    1. The user needs to tap the dropdown arrow on mobile in order to open sub-menus. The exceptions are:

    a) The parent menu item is a custom link with # as the URL (no destination)
    b) The navigation dropdown type is set to “Click – Menu Item” in Customize > Layout > Primary Navigation.

    I’d like to add an option to allow the entire menu item to be tapped on mobile, even when using the “Hover” dropdown type.

    2. Very soon! It’s a release candidate now, so we’re within a week or so of being released.

    4. Have you considered using a service like https://fortawesome.com? It’s a paid solution, but allows you to easily choose only needed icons for your site.

    Otherwise you’d need to use a service like icoMoon to create a custom font, and then add it using @font-face: https://css-tricks.com/snippets/css/using-font-face/

    5. Interesting. Just to test, can you try moving it into Customize > Additional CSS? Just to see if the order needs adjusting.

    6. That looks good!

    Try this to show the images: https://generatepress.com/forums/topic/mobile-friendly-woocomerce-cart-layout/#post-555346

    7. Try this CSS:

    .woocommerce-checkout #payment .payment_method_stripe label[for=payment_method_stripe] {
        padding-left: 20px;
    }

    9. Which page is this form on?

    10. I’m seeing an Amazon button at the top of your checkout page. Should there be another one? Where on your cart should it be?

    11. Try this CSS:

    @media (max-width: 1020px) {
        #site-navigation {
            float: none;
        }
    
        #site-navigation li {
            float: none;
            display: inline-block;
        }
    }

    12. The height of the mobile header should come from your mobile menu item height in “Customize > Layout > Primary Navigation”.

    There’s no option to make the mobile header shrink right now.

    In the future, it may be better to break some of these questions up into separate topics. It makes them easier to search for other users, and also keeps things more organized in the topic.

    Thanks!

    #638583
    pairfum

    Hi Tom,

    Many thanks for your replies above.

    As per your suggestion, we will only place our questions that relate to this thread here and create new threads for the new ones.

    1. Mobile Navigation Menu
    Your suggestion for the navigation menu works very well. We now have hover on the desktop and tap on the mobile/tablet.

    2. Transparent / Mobile Header
    The new header that we were able to create with Elements really looks very good.

    We have created in the Elements Site Header a slightly transparent dark background colour, i.e. rgba(62,62,62,0.3), to ensure the navigation menu is easily seen.

    On the mobile, to have a slightly dark transparent background (before scroll) and a dark background on hover, we added this CSS code:

    /* Darken Mobile & Tablet Header – before scroll & on hover */
    .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
    background: #3e3e3e; /* The fallback */
    background: rgba(62,62,62,0.5);
    }

    .header-wrap #mobile-header:not(.toggled):not(.navigation-stick):hover {
    background: #3e3e3e;
    }

    Please let us know whether this is correct or should be adjusted.

    3. Header on Tablet – Two Rows
    This header looks good: https://snag.gy/SyqMx2.jpg
    The same header on scroll it doesn’t look good, as the right side of the menu slides onto another row: https://snag.gy/M6pmLv.jpg

    Do you have a suggestion how this could be fixed? We did add the code you suggested.

    I tried placed your code both into the child’s style.css file and into the customiser.

    4. WooCommerce Product Page – Add to Basket
    https://staging.pairfum.com/product/reed-diffuser-refill/

    The ‘add to basket’ button does not match the colour & settings of the buttons on the shop page:
    https://staging.pairfum.com/home-fragrance-boutique/

    The ‘Add to Basket’ does not change colour on hover.

    We have added the following CSS code to match the ‘add-to-cart’ button colour (incl hover) of the code added to customiser, as it works there but not in style.css of the Child Theme.

    /* WooCommerce Button Change Colour on hover */
    .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce button.button.alt:hover {
    background: #c9c9c9 !important;
    color: #000000 !important;
    }

    .woocommerce button.button.alt {
    background-color: #3e3e3e !important;
    color: #fffff0 !important;
    }

    5. WooCommerce Product Page – Styling of the Tabs
    https://staging.pairfum.com/product/reed-diffuser-refill/
    Your code suggested above works when added to CSS in the customiser but not in style.css in the Child theme.

    We changed the background colour of the active tab and the corner radius to better match the styling of our existing site:
    https://www.pairfum.com/product/reed-diffuser-refill/

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
    background: #ffffff !important;
    }

    We would, however, prefer to place all of the custom CSS code in the Child Theme’s style.css file, as this keeps all the custom codes in one place.

    6. WooCommerce Cart – Coupon Field
    https://staging.pairfum.com/cart/
    Thank you for your css code snippet. The product thumbnails for the items are now visible both in landscape & portrait mode.

    Our css code to adjust the coupon field, works on the desktop but the coupon field does not increase its height when on mobile the text ‘apply code’ in the button breaks into two lines, i.e. the coupon field height stays the same is consequently less. Do you know a solution?

    /* Coupon Field Align with Apply Button */
    .woocommerce-cart table.cart td.actions .coupon .input-text {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 43px;
    text-align: center;
    }

    7. Disable Elements / Pages Not Full Width
    https://staging.pairfum.com/natural-eau-de-parfum/
    https://staging.pairfum.com/wholesale-natural-home-fragrance-organic-skin-care-perfume/

    I have checked in the Beaver Builder plugin and they have the same settings as the front page:
    https://www.pairfum.com/

    8. Amazon Pay & Login

    We noticed that the Amazon login buttons disappear (on both the ‘cart’ and the ‘checkout’ pages), if this plugin is active and the site is being viewed in Firefox (with Tracking Protection active).

    Equally, the Stripe payment gateway input fields are no longer functional.

    As soon as the tracking protection or the plugin are de-activated, the fields function again.

    Do you know what could be the cause, especially for disabling the Stripe Payment Gateway input fields?

    Many thanks for your continued help & support.

    Kind regards,

    Pairfum

    #638839
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    3. In the code I suggested, I set the width as 1020px. You can increase this to the point where the menu items start to wrap. So perhaps it needs to be 1100px (for example).

    4. Did you fix this? The hover seems to be working for me fine: https://gyazo.com/e1e4e207bb71616bcdfdc18f67bc2f1f

    5. Try adding this function:

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 99 );

    That should load your child theme CSS after the WooCommerce CSS.

    6. You could try something like this:

    @media (max-width: 768px) {
        .woocommerce-page table.cart td.actions .coupon .input-text, 
        body.woocommerce-page table.cart td.actions .coupon input,
        .woocommerce-page table.cart td.actions .coupon .button {
            width: 100% !important;
            float: none !important;
        }
    }

    7. Have you tried using our new Elements module in GPP 1.7? You can create a new “Layout” element, which allows you to set the container to full width etc..

    8. I’m not sure about this – have you tried reporting it to the plugin developer?

    #640437
    pairfum

    Hi Tom,

    Many thanks for all of your tips and guidance.

    We have made a lot of changes to the site and it is getting very close to be ready to go live.

    Unfortunately, there are few things that still need to be ironed out.

    3. Mobile Menu

    My apologies, maybe we have not expressed clearly the issue we notice.

    You code snippet works well for the header on initial loading of the page, i.e. before any scroll. It is on scroll, i.e. with the sticky menu, that we see the issues.

    At 923px wide the navigation menu looks fine on scroll:
    https://pasteboard.co/HxE2ejw.png

    At 922px wide the navigation menu goes into two rows on scroll, with ‘search’ and ‘blog’ (on smaller screens) moving into the next row:
    https://pasteboard.co/HxE1IBk.png

    It stays like this until the screen is only 768px wide, where the menu switches to the reduced size:
    https://pasteboard.co/HxE1fRv.png

    Essentially, we would like to control when the reduced sticky menu (with the hamburger) becomes active, i.e. 922px in our case, but ONLY the reduced sticky menu, as we like the bigger menu on bigger screens before the scroll.

    Which CSS snippet could do this for us?

    4. WooCommerce Product Page – Add to Basket

    Yes, we used the code I listed above and after the function you suggest under 5 above to enque the Child Theme’s style.css after WooCommerce styling, it works also when it is in style.css rather than in the customiser.

    5. WooCommerce Product Page – Styling of the Tabs

    We added your code to Child Theme’s functions.php file and it works for the ‘add to cart button’ on the product page but it does not seem to work for the styling of the product tabs.

    We added your function in the Child Theme’s functions.php but it does not seem to have an effect on the styling of the tabs.

    When the tab styling is in the customiser it works, when it is Chid theme’s style.css it has no effect.

    Ideally, we would like the tabs on the product page to be styled like our live site, as we believe this to be a clean and easily understood, plus the styling scales down well on mobiles:
    https://www.pairfum.com/product/reed-diffuser-refill/

    6. WooCommerce Cart – Coupon Field

    Thank you for your code. This seemed to fix it.

    This is the code we are now using in the Child Theme’s style.css

    /* WooCommerce Cart – Coupon Field Align with Apply Button */
    .woocommerce-cart table.cart td.actions .coupon .input-text {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 43px;
    text-align: center;
    }

    /* WooCommerce Cart – Coupon Field Align with Apply Button */

    @media
    (max-width: 430px) {
    .woocommerce-page table.cart td.actions .coupon .input-text,
    body.woocommerce-page table.cart td.actions .coupon input,
    .woocommerce-page table.cart td.actions .coupon .button {
    width: 100% !important;
    float: none !important;
    }
    }

    7. Disable Elements / Pages Not Full Width

    We have GP Premium 1.7 RC2 installed and I double-checked the Element we created to apply ‘full width’. Here are the settings:
    – Content (no sidebars)
    – full width container
    – these are the display rules: https://pasteboard.co/HxE7yg5I.png

    It seems to have no effect on these pages:
    https://staging.pairfum.com/natural-eau-de-parfum/
    https://staging.pairfum.com/wholesale-natural-home-fragrance-organic-skin-care-perfume/

    Our live site seems to display the two pages nicely using the BB Theme:
    https://www.pairfum.com/natural-eau-de-parfum/
    https://www.pairfum.com/wholesale-natural-home-fragrance-organic-skin-care-perfume/

    8. Amazon Pay

    No problem. We asked the Plugin developer the same question.

    9. Borders on the WooCommerce Cart & Checkout pages

    We have added the following CSS code, as the outlines / boxes were insufficient. We believe these lines should really be part of the styling in GeneratePress.

    We don’t think the code is great as it overlaps with other code settings but it does work.

    If you have a better code, then it would very welcome.

    /* WooCommerce Cart – Border Cart Content */
    .woocommerce .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents, .woocommerce-cart .cart-collaterals .cart_totals table {
    border: 1px solid #c9c9c9;
    border-radius: 0;
    }

    /* WooCommerce Checkout – Borders */
    .woocommerce .shop_table.woocommerce-checkout-review-order-table, .woocommerce .woocommerce-checkout #payment ul.payment_methods {
    Border: 1px solid #c9c9c9;
    border-radius: 0px;
    }

    /* WooCommerce Checkout – Bottom Borders On Subtotal, Shipping, Total */
    /* Source: Google Chrome Inspector */
    .woocommerce table.shop_table tfoot td {
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
    }

    You can see them in effect here:
    https://staging.pairfum.com/cart/
    https://staging.pairfum.com/checkout/

    You can see the styling coming from the BB Theme on our live site here:
    https://www.pairfum.com/cart/
    https://www.pairfum.com/checkout/

    10. Coupon Field on WooCommerce Checkout page

    For other forum member’s benefit, we place here the code we used to style the coupon code field on the checkout page. Also, if you have any comments on this code, then this would be most welcome.

    /* WooCommerce Checkout – Align Coupon Input Text Field with Apply Button */
    .woocommerce form .form-row-first #coupon_code.input-text, .woocommerce-page form .form-row #coupon_code.input-text {
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: center;
    }

    .woocommerce form.checkout_coupon button.button {
    width: 100%;
    }

    /* WooCommerce Checkout – Coupon Field Align with Apply Button */

    @media
    (max-width: 768px) {
    .woocommerce form.checkout_coupon .form-row-first, .woocommerce form.checkout_coupon .form-row-last, .woocommerce-page form.checkout_coupon .form-row-first, .woocommerce-page form.checkout_coupon .form-row-last {
    width: 100%;
    overflow: visible;
    float: left;
    }

    .woocommerce form.checkout_coupon .form-row input.input-text, .woocommerce form.checkout_coupon .form-row textarea {
    text-align: center;
    }

    .woocommerce form.checkout_coupon button.button {
    width: 100%;
    }
    }

    Summing up, it feels like we are nearly there and the site is looking very good and loading very fast.

    Many thanks for your continued support with the issues we are experiencing.

    Kind regards

    Pairfum London

    https://www.pairfum.com

    #640629
    Tom
    Lead Developer
    Lead Developer

    3. Try adding this CSS as well:

    @media (max-width: 1020px) {
        #sticky-navigation .site-logo {
            float: none;
            width: 100%;
            text-align: center;
        }
    
        #sticky-navigation .navigation-logo img {
            margin: 0 auto;
        }
    
        .nav-float-right #sticky-navigation {
            text-align: center;
        }
    }

    5. Can you deactivate WP Rocket during development so we can see the code easier?

    7. Do you have any other “Layout” Elements added with the same Display Rules? If two Layout Elements are active on a page, the page will listen to the older (original) Element instead of the new one.

    9 + 10: Your CSS all looks great, and the site is looking awesome as well. Thanks for sharing your code with the forum 🙂

    #640817
    pairfum

    Hi Tom,

    Many thanks for all of these solutions.

    3. Mobile Menu

    The solution is quite close now but there are parts where it does not quite work yet.

    1021px and above:
    – initial load: https://pasteboard.co/HxLIRT2.png
    – on scroll: https://pasteboard.co/HxLJvMZ.png
    All of this looks good!

    between 1020px and 769px:
    – initial load: https://pasteboard.co/HxLK59K.png
    – on scroll: https://pasteboard.co/HxLKs99.png
    Two things I noticed:
    – part of the message “Natural Perfume … You” has slid under the navigation menu, and
    – on scroll the ‘search’ icon disappears under the floating shopping cart. I can move the shopping cart up (this is not the issue) but the search icon is still lost on the far right of the screen when it should be next to ‘blog’

    768px and below:
    – initial load: https://pasteboard.co/HxLM84S.png
    – on scroll: https://pasteboard.co/HxLMo1x.png
    Here again, all looks good.

    5. WooCommerce Product Page – Styling of the Tabs

    No problem, WP-Rocket is de-activated.

    7. Disable Elements / Pages Not Full Width

    Yes, this solution fixed it! Thank you.

    We had indeed a 2 x Layout Element activated that overlapped:
    – one was for ‘full width’ pages, and
    – the other was for ‘disabling’ elements.

    Changing the logic of the elements so that only one element applied per page/post/etc. solved the problem.

    By the way, it would be good to have under display rules -> location -> general / posts / pages / etc. a group that refers to WooCommerce pages, e.g. cart, checkout, etc.

    Summing up, the only two issues left are the mobile/tablet menu and the styling of the tabs on the product pages.

    Many thanks for your continued support with the issues we are experiencing.

    Kind regards

    Pairfum London

    https://www.pairfum.com

    #641302
    Tom
    Lead Developer
    Lead Developer

    3a: I’m not sure what you mean here? Wouldn’t that just be the sticky navigation sticking on top of the content below?

    3b: Try adding this to your media query:

    .nav-float-right .is_stuck.main-navigation .menu > li.search-item {
        float: none;
        display: inline-block;
    }

    5. Hmm, try replacing the function I gave you with this:

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );

    Let me know 🙂

    #642203
    pairfum

    Hi Tom,

    Many thanks for your reply.

    3. Mobile Menu

    3.b – We have added this snippet to @media (max-width: 1020px) and it works very well.

    3.a – Sorry, but I don’t really understand what you refer to with 3.a. Do you mean:
    – 1021px and above … (but all is good here), or
    – between 1020px and 769px, part of the message / white message box with “Natural Perfume … You” showing under the navigation menu? This problem still persists despite the solution under 3.b.

    On some screen sizes, the text box (with the perfume bottle on some) of the image at the top, are showing under the header, as you can see here:
    https://pasteboard.co/HxLK59K.png

    In an ideal world, we would like to use a bigger version (i.e. the band is taller) of the mobile navigation menu (i.e. 768px or less) for screen sizes between 769px and 1020px.

    Is this feasible?

    5. WooCommerce Product Page – Child Theme Styling Trumps WooCommerce

    This code snippet works now.

    5. WooCommerce Product Page – Styling the Tabs

    We have now styled the tabs with the code below. It works but I don’t think it is very streamlined, especially the first part ( /* WooCommerce Products – Styling Tabs Themselves – Border & Size */ ) and it would be great, if you had an improvement for it:

    /* WooCommerce Products – Styling Tabs Themselves – Border & Size */
    /* Source: https://generatepress.com/forums/topic/keep-original-woocommerce-styling-after-activiting-gp-woocommerce-module/#post-618323 */
    .woocommerce .tabs.wc-tabs,
    .woocommerce-page .tabs.wc-tabs {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .woocommerce div.product .woocommerce-tabs,
    .woocommerce-page div.product .woocommerce-tabs {
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 0 0;
    border-bottom: 1px solid #c9c9c9;
    border-top: none;
    border-left: none;
    border-right: none;
    list-style: none;
    padding: 0 1em 0 1em;
    overflow: hidden;
    position: relative;
    text-align: left;
    }

    .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    border-right-color: #c9c9c9;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #c9c9c9;
    border-top-style: solid;
    border-top-width: 1px;
    border-left-color: #c9c9c9;
    border-left-style: solid;
    border-left-width: 1px;
    background-color: #ebe9eb;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 0;
    margin: 0 -5px;
    padding: 0 1em;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: .5em 0;
    font-weight: 700;
    color: #808080;
    text-decoration: none;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
    background: #ffffff !important;
    }

    /* WooCommerce Product – Syling Tabs Panel – Border & Size */
    /* Source: styling from BB Theme */
    .woocommerce div.product .woocommerce-tabs .panel,
    .woocommerce-page div.product .woocommerce-tabs .panel {
    border-right-color: #c9c9c9;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #c9c9c9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #c9c9c9;
    border-left-style: solid;
    border-left-width: 1px;
    padding: 20px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    @media
    only screen and (max-width: 768px) {
    /* WooCommerce Product Tabs – Tab Size */
    .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    display: block;
    }

    /* WooCommerce Product – Tabs Panel – Border & Size */
    .woocommerce div.product .woocommerce-tabs .panel,
    .woocommerce-page div.product .woocommerce-tabs .panel {
    padding: 5px;
    }
    }

    You can see the styling here:
    https://staging.pairfum.com/product/reed-diffuser-refill/
    – or here when the site is live https://wwww.pairfum.com/product/reed-diffuser-refill/

    From our perspective, we believe that we can now go live with the GP Premium 1.7 RC2 today. Our site seems to work or would you still advise against it? We don’t mind waiting, as you mentioned that GP Premium will go live shortly anyway.

    Many thanks to both you & Leo for all your help & support. It is very much appreciated.

    With kind regards,

    Pairfum London

    https://www.pairfum.com

    #642872
    Tom
    Lead Developer
    Lead Developer

    3a. I see, that’s because the header is floating on top of the BB section.

    You can try adding this inside that specific media query:

    .fl-node-5b2511055470f {
        margin-top: 50px;
    }

    I’m not seeing anything particularly wrong with your CSS. You could use shorthand CSS a bit more to reduce the amount of CSS though. Running it through this tool might help: https://shrthnd.volume7.io/

    I’ll be releasing rc.3 tomorrow, and then 1.7 on Monday. You should be safe to go with rc.2 right now 🙂

    Glad I could help!

    #643476
    pairfum

    Many thanks, Tom, for all your help.

    Kind regards,

    Pairfum

    https://www.pairfum.com

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