Template Fluorspar

Getting late on my end. "PM" me sometime tomorrow and I will help you out.

chadlly2003:

Getting late on my end. "PM" me sometime tomorrow and I will help you out.

No Problem, have a good night.

Make sure this does not impact the other navigation elements

to get what you are looking for go to

**path: **stylesheet_header_menu.css

find

.submenu a::after {
content: " >";
font-weight: bold;
margin-left: 5px;
}

**replace with: **
.dropdown_expand .level2 li:hover > a {color:#000;}
.mega-menu li:hover div a:hover {border-radius: 0px;}
.dropdown_expand .level2 li:hover a {width: 100%;color:#000;}
.mega-menu li ul li {border:none;}
.mega-menu .categories-li .dropdown_expand .level2 > li > a:hover {background: transparent;color:#000 !important;}
.mega-menu .categories-li .dropdown_expand .level2 > li > a {width: 100%;padding-left:0px; padding-right:0px;}
.level3 {border:none !important;}
.dropdown_expand .level2 li:hover a {padding-right:0px;}

.mega-menu li ul li {
width: 100%;
}

.level2 > .submenu > a:after {
content: " >";
font-weight: bold;
margin-left: 5px;
float: right;
margin-right: 0.5rem;
}

.level3 {
display: none;
position: absolute;
top: 0;
left: 100%; /* Position to the right of the parent */
background: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
min-width: 200px;
z-index: 1000;
}

/* Style the main level2 list */
.level2 {
list-style: none;
padding: 0;
margin: 0;
position: relative;
background: #f9f9f9;
width: 200px;
}

/* Style level2 items */
.level2 > li {
position: relative;
border-bottom: 1px solid #ddd;
}

/* On hover, show the level3 submenu */
.level2 > li:hover > .level3 {
display: block;
}

/* Links style */
.level2 a,
.level3 a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}

/* Hover style */
.level2 a:hover,
.level3 a:hover {
background-color: #eee;
}

chadlly2003:

Make sure this does not impact the other navigation elements

to get what you are looking for go to

**path: **stylesheet_header_menu.css

find

.submenu a::after {
content: " >";
font-weight: bold;
margin-left: 5px;
}

**replace with: **
.dropdown_expand .level2 li:hover > a {color:#000;}
.mega-menu li:hover div a:hover {border-radius: 0px;}
.dropdown_expand .level2 li:hover a {width: 100%;color:#000;}
.mega-menu li ul li {border:none;}
.mega-menu .categories-li .dropdown_expand .level2 > li > a:hover {background: transparent;color:#000 !important;}
.mega-menu .categories-li .dropdown_expand .level2 > li > a {width: 100%;padding-left:0px; padding-right:0px;}
.level3 {border:none !important;}
.dropdown_expand .level2 li:hover a {padding-right:0px;}

.mega-menu li ul li {
width: 100%;
}

.level2 > .submenu > a:after {
content: " >";
font-weight: bold;
margin-left: 5px;
float: right;
margin-right: 0.5rem;
}

.level3 {
display: none;
position: absolute;
top: 0;
left: 100%; /* Position to the right of the parent */
background: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
min-width: 200px;
z-index: 1000;
}

/* Style the main level2 list */
.level2 {
list-style: none;
padding: 0;
margin: 0;
position: relative;
background: #f9f9f9;
width: 200px;
}

/* Style level2 items */
.level2 > li {
position: relative;
border-bottom: 1px solid #ddd;
}

/* On hover, show the level3 submenu */
.level2 > li:hover > .level3 {
display: block;
}

/* Links style */
.level2 a,
.level3 a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}

/* Hover style */
.level2 a:hover,
.level3 a:hover {
background-color: #eee;
}

So far its working but the only problem is I get the > on the sub categories.

you need to remove

.submenu a::after {
content: " >";
font-weight: bold;
margin-left: 5px;
}

I did, I fixed it. There was a line of code was missing. So, I had recopy and re-paste of the code and now it works like a charm. Thank You.

What is the best way to remove or hide "Brands and Services" on the mega menu?

"too remove or hide brands"

Looks like you forgot to closer you media tag in your css file. just add this and it will solve both your problems

path: stylesheet_header_menu.css
**line 256. **

}
.manufacturers-li {
    display: none !important;
}

.customerservice-li {
	display: none !important;
}

chadlly2003:

"too remove or hide brands"

Looks like you forgot to closer you media tag in your css file. just add this and it will solve both your problems

path: stylesheet_header_menu.css
**line 256. **

}
.manufacturers-li {
display: none !important;
}

.customerservice-li {
display: none !important;
}

I don't see both in that file.

I think you misunderstood. You just need to copy and past it to line 256 and all should be good.

chadlly2003:

I think you misunderstood. You just need to copy and past it to line 256 and all should be good.

Yes, I did misread what you said. Sorry about that.

Ok, I have notice something missing in the product page. For the product description when I want to use the bullet it doesn't show the bullet in the product page on this template and I would like the font to be normal. Like the on the responsive classic template.

wmorris:

Ok, I have notice something missing in the product page. For the product description when I want to use the bullet it doesn't show the bullet in the product page on this template and I would like the font to be normal. Like the on the responsive classic template.

Can you explain exactly what your looking for. The last post was not clear.

chadlly2003:

Can you explain exactly what your looking for. The last post was not clear.

Yes, on the Responsive classic Template in the product info pages when I have the bullet symbol it shows it. But, on the this template when I try to do the bullet symbol it doesn't show the bullet symbol in the Fluorspar in the Product Info pages.

wmorris:

Yes, on the Responsive classic Template in the product info pages when I have the bullet symbol it shows it. But, on the this template when I try to do the bullet symbol it doesn't show the bullet symbol in the Fluorspar in the Product Info pages.

Where do you want the bullets to appear? Can you tell me the piece of code your trying to change

chadlly2003:

Where do you want the bullets to appear? Can you tell me the piece of code your trying to change

Under the Product Description I want to put the bullet on each line (sentence).

I started with every second occurrence because you don't want bullets in the "Product Des

add this to the bottom of your stylesheet. ```
#productinfoBody p:nth-of-type(n+2) {
position: relative;
padding-left: 1.2em;
}

#productinfoBody p:nth-of-type(n+2)::before {
content: "•";
position: absolute;
left: 0;
color: black;
}

chadlly2003:

I started with every second occurrence because you don't want bullets in the "Product Des

add this to the bottom of your stylesheet. ```
#productinfoBody p:nth-of-type(n+2) {
position: relative;
padding-left: 1.2em;
}

#productinfoBody p:nth-of-type(n+2)::before {
content: "•";
position: absolute;
left: 0;
color: black;
}

> 
> 
> 
> 

I added the code still no bullet.

did you put it at the bottom of stylesheets.css. When I use firefox developer tools and paste it into your stylesheet the bullets do show up.

chadlly2003:

did you put it at the bottom of stylesheets.css. When I use firefox developer tools and paste it into your stylesheet the bullets do show up.

Yes I did. I tried Safari and Firefox then clear image cache still no change.