[Support request] Home Button | Mega Menu | Sticky Panel

[pairfum]

Dear Support,

We would really appreciate your help with a few issues we face:

1. Home Button

In main menu bar, we have a SVG home icon and you can see it here on our website:
https://www.pairfum.com

When hovering over this icon, it doesn’t behave like the other menu items, i.e. icon colour change and background colour size.

Is it possible to make it behave like the other menu items?

2. Mega Menu

We have added the GeneratePress Mega Menu to our site and it works well for us.

We would like to make a few changes:
– we would like the Mega Menu drop down panel to be wider, ideally as wide as the drop down panel becomes on scrolling.
– is it possible to add a thin line on all sides of the panel, i.e. like the existing shadow.
– is it possible to add images to the drop down panel of the Mega Menu, e.g. at the top of each column?

3. Sticky Panel

On our site we are showing the sticky add-to-cart panel permanently.

We noticed, however, that the panel does not work for ‘grouped’ and ‘bundled’ products. You can see this here:
https://www.pairfum.com/product/bundle-pre-biotic-body-lotion-organic-body-wash/

Two questions in this context:
– Is it possible to make it work for these two product types as well?
– If this is not possible, then is there a way to remove the ‘white’ band that the sticky add-to-cart panel currently generates on these type of product pages?

4. Menu on Scroll

We notice an odd menu behaviour that we cannot understand:
On screen size of between 1100 – 768 px, on scroll when the wide of the main navigation menu narrows and sticks to the top of the page, the menu configuration is over two rows. Above 1100px it is a single row.

However, it doesn’t make sense that on these devices with smaller screen sizes (1100-768px = tablets, laptops) the main navigation is arranged over two rows, rather than the one single row, we see on on bigger screens.

I suspect it is probably just a very simple settings change but we can’t figure which one.

Would you have code snippets and settings suggestions that allow us to allow us to address each of the 4 x points above?

Many thanks for your help with this.

Kind regards,

Pairfum London

[David]

Hi there,

1. You’re using an for that icon, you cannot manipulate an images color using CSS. Instead you would add an inline SVG eg. this a Font Awesomes inline SVG for their Home Icon.

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

2. Mega Menu
a. You would need to enable the Navigation as Header Option in Customizer > Layout > Header
b. Try this CSS:

nav .main-nav .mega-menu > ul {
    box-shadow: 0 2px 1px 1px rgba(0, 0, 0, .2);
}

c. Thats tricky – you can add a HTML <img> as a Menu Item Label.

3. Sticky add to cart only works for simple products, if its a variable product then it simply provides a link back to add to cart form. So we would have to disable this function on Grouped Products.
Which plugin are you using for the Grouped Product as you would need to ask its developer what Template Tag we could use to conditionally check its a grouped product, then we can help with some PHP to remove it.

4.Complete Point #2 this should keep elements inline if there is room for them.

Note regarding #2 and #4 we may need to provide some CSS to resize the logo.

[pairfum]

Hi David,

Many thanks for your reply and suggestions.

1. Home Icon

I pasted your code into the ‘navigation label’ field of the home menu item in the menu structure but it did not work, sadly.

I suspect that we are missing an additional instruction from you.

Instead, we followed the instructions on this page:
https://www.wpsuperstars.net/how-to-use-dashicons/

The result is exactly what we are looking for and it is live on our site:
https://www.pairfum.com

We added the following CSS code to have the same colour & hover effects as the other Menu Items:

/* Vertical Align Elements Inside Main Navigation */
.main-navigation li#menu-item-37217 a,
.main-navigation li#menu-item-37262 a {
   padding: 0px;
}

.main-navigation li#menu-item-37262 .dashicons.dashicons-admin-home {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 35px;
    padding-top: 35px;
	align-items: center;
    justify-content: center;
    display: flex;
    font-size: 25px;
}

/* adjust for Off-Canvas Menu for Mobile */
.main-navigation li#menu-item-37217 .dashicons.dashicons-admin-home {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
	align-items: center;
    justify-content: center;
    display: flex;
    font-size: 25px;
}

.main-navigation li#menu-item-37262 .dashicons.dashicons-admin-home:hover {
    color: #3e3e3e;
    font-weight: inherit;
    background: #ffffff;
}

/* adjust for Off-Canvas Menu for Mobile */
.main-navigation li#menu-item-37217 .dashicons.dashicons-admin-home:hover {
    color: #fffae7;
    font-weight: inherit;
    background: #606060;
}

We are happy to keep this solution unless you advise against it because it might be slow loading.

2. Mega Menu

A) we don’t seem to have the option to enable the Navigation as Header Option in Customizer > Layout > Header. The option is simply not there.

B) The CSS code to add the outline / shadow to the drop down menu works perfectly. Thank you.

C) Images in Mega Menus: we have parked this for the time being, as you mentioned that it is tricky.

3. Sticky Panel

A) Bundled Products

Your suggestion sounds great.

We use the following plugin for Bundled WooCommerce Products:
– Plugin itself: https://wpclever.net/downloads/woocommerce-product-bundle
– support documentation: https://doc.wpclever.net/woosb/

B) Variable Products

For variable products, we find that when the user clicks on ‘choose perfume’ within the stick panel at the bottom of the page, that the cursor or view sometimes jumps to far up, i.e. the selector for the variable product is hidden beneath the navigation bar.

Can this behaviour be adjusted slightly?

4. Menu On Scroll

I presume you are referring to enabling the ‘Navigation as Header Option’, which we don’t seem to have.

Many thanks for all your help with these points.

Kind regards,

Pairfum London

[pairfum]

Hi David,

Could you mind having a look at our last reply?

Many thanks,

Pairfum London

[David]

Hi there,

first off, our apologies that your last reply was missed, it somehow slipped through our system.

1. Home icon – thats a perfectly valid way to do it, and the dash-icons is a small file so i cannot see it affecting performance.

2. If you change the Customizer > Layout > Primary Navigation –> Location to Above or Below header, the the Navigation as Header option will appear in Customizer > Layout > Header

3. Do you get support from the Bundled plugin author, looking through their documentation i cannot see what we need. We need them to provide a template tag that we can use to ascertain that the single product is a bundled product.

4. See point 2 above.

[Author]

Posts