-
https://staging11.mightykidssupplements.co.uk/
Hi, I’m having a strange issue using the additional CSS panel. I’m trying to style the drop down submenu that appears when clicking the SHOP button. It looks fine but the site was originally a GP template site that I adapted, and it had a green rounded button over the shop link, that came presumably from this snippet that was originally in the additional CSS box:
/* GeneratePress Site CSS */ /* SHOP menu button */
@media (min-width: 951px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: var(–accent);
color: var(–base-3);
text-transform: uppercase;
padding-left: 25px;
padding-right: 25px;
border-radius: 9999px;
line-height: 40px;
}
.main-navigation .main-nav ul li.nav-button a:hover {
background-color: var(–accent-2);
color: var(–base-3);
}
}I removed this and replaced it with
.main-navigation ul ul {
border:
0px;
background-color: white;
border-top: 0;
border-radius:3px;
}.main-navigation ul li.menu-item.sfHover a, .main-navigation .main-nav ul li:hover a {
border-radius: 3px;
}But the green button around the shop text still shows up occasionally just for a split second. It usually appears when changing pages. I’ve purged the cache and it’s also appearing on other computers.
-
Hi there,
You just need to remove any CSS that has
li.nav-button
from additional CSS field, and remove the CSS classnav-button
added to the menu item at appearance > menus.
https://app.screencast.com/Y8VmxZ7dWVCww -
Hi Ying,
The additional CSS doesn’t have any instance of li.nav-button (I’ve copied it all below) and also the menu item at appearance > menus doesn’t have a CSS field
.main-navigation ul ul {
border:
0px;
background-color: white;
border-top: 0;
border-radius:3px;
}.main-navigation ul li.menu-item.sfHover a, .main-navigation .main-nav ul li:hover a {
border-radius: 3px;
}/*Hide Add To Cart Until Variation is selected*/
.woocommerce-variation-add-to-cart-disabled {
display:none;
}/* Hide popup display price of variations */
.product.product-type-variable .price {
display: none;
}.woocommerce-page div.product p.stock {
font-size: 20px;
font-weight: bold;
color: #72b043;
}ul.keyf {
list-style: none;
margin: 0; padding: 0;
}ul.keyf li:before {
content: ‘✓’;
color: green;
font-size: 24px;
}.woocommerce ul.products li.product {
border-radius: 10px;
overflow: hidden;
padding: 10px;
}
.woocommerce ul.products li.product .button {
border-radius: 5px;
}.woocommerce ul.products li.product {
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0);
transform: translate3d(0,0,0);
transition: all 0.2s ease-in;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
transform: translate3d(0,-5px,0);
}.woocommerce-checkout #order_comments,
#order_comments select {
border: 0.3px solid grey;
padding: 10px;
}.woocommerce-store-notice__dismiss-link {
color: #c98e1f !important;
font-size:0;
}.woocommerce-store-notice__dismiss-link:after {
content: ‘x’;
height: 26px;
width: 26px;
border-radius: 10%;
right: 0.7em;
position: absolute;
background: #f5f2eb;
line-height: 22px;
font-size: 21px;
text-align: center;
cursor: pointer;
color: #c98e1f !important;
}/* demo store notice */
.woocommerce-store-notice, p.demo_store {
color: #c98e1f;
background-color: #f2ecd8 !important;
}p.woocommerce-store-notice.demo_store {
bottom: 0;
top: auto;
position: fixed;
}#billing_country_field {
display: none;
}.wc-block-grid__product-rating .star-rating {
float: none !important;
color: orange !important;
}/* Single post featured image */
.single-post .featured-image img {
border-radius: 8px;
}/* Author archive */
.author img.avatar {
border-radius: 100%;
}/* Right sidebar */
.inside-right-sidebar .wp-block-categories-list,
.wc-block-product-categories-list{
list-style: none;
margin: 0;
}/* Comments border */
article.comment-body .comment-content {
border: 1px dashed var(–contrast-4);
}/* Light box shadow */
.light-box-shadow {
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}/* Services headline divider */
.entry-content .gb-headline.headline-divider svg {
width: 7em;
}/* WooCommerce */
/* Breadcrumbs */
.entry-content .woocommerce-breadcrumb {
font-weight: 700;
}
.entry-content .woocommerce-breadcrumb a {
color: var(–accent);
}
.entry-content .woocommerce-breadcrumb a:hover {
color: var(–accent-2);
}/* Product archive */
.wc-product-image {
border: 2px solid var(–accent);
}
form.woocommerce-ordering .orderby {
background-color: var(–base-2);
border: 1px solid var(–contrast-4);
}
.wc-block-product-search__fields button.wc-block-product-search__button {
display: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background-color: var(–base-2);
}
.wc-columns-container .products .button,
.related.products .button {
border-radius: 9999px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
background-color: var(–base-2);
}/* Single product */
.woocommerce-product-gallery__wrapper {
border: 0px solid var(–accent);
}.woocommerce-product-gallery__image.flex-active-slide {
pointer-events: none !important;
}.woocommerce-form-coupon-toggle {
display: none;
}/* Basket */
.woocommerce button.button:disabled[disabled] {
color: var(–base-3);
}
.woocommerce-order .woocommerce-customer-details address {
padding: 20px;
border: 2px solid var(–contrast);
border-radius: 0;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
} /* End GeneratePress Site CSS */ -
The additional CSS doesn’t have any instance of li.nav-button (I’ve copied it all below)
It’s in the CSS you provided in your original topic, if that’s cleared, then that’s it.
and also the menu item at appearance > menus doesn’t have a CSS field
It’s hidden by default, you need to enable it to edit the additional CSS class.
check this:https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes -
Thanks Ying, that worked 🙂
-
You are welcome 🙂
-
Hi, I have another question about this dropdown menu… the only default settings I could find were to make the shop button either a clickable link so that it clicks through to a page, or so that on click it shows the drop down menu. What I’m hoping to do is make it unclickable, and make it show the drop down menu on hover. Is this possible?
Thanks
-
Alvind
Hi there,
Go to Appearance > Customize > Layout > Primary Navigation. Under Navigation Dropdown, select Hover.
-
Thanks I tried that but the shop link is still clickable, I’d like it to force a click of one of the drop down options
-
David
Hi there,
edit your Menu in Appearance > Menus, and remove the Shop menu item
then Add a Custom link with a URL of#
and and label of Shop
Once added to the menu you can remove the # from the URL.That will add the Shop item as label only.
And you can then nest your sub menu items below it -
Perfect! Thanks David.
-
David
You’re welcome
- You must be logged in to reply to this topic.