Header Nav

Shopify Discussion
,
1

I’m using the Forest theme DigiFirst and I’m trying to remove the animated line on hover in the nav. Is there a way to do this. I’ve been looking through coding and countless research on how to achieve this with no luck.

2

Hey @CherylAnne

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.text--link:hover:before, .header__nav-item:hover .text--link:before {
    content: unset !important;
}
</style>

RESULT:

image
image1037×467 95.5 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

It looks like the theme is adding an animated underline using a CSS pseudo-element on the navigation links.

I’d inspect the menu item in your browser and look for CSS similar to:

.header__menu-item:after,
.header__menu-item::after

or

.header__menu-link:after

Then try overriding it with:

.header__menu-item:after,
.header__menu-item::after {
    display: none !important;
}

or

.header__menu-item:after,
.header__menu-item::after {
    transform: none !important;
    opacity: 0 !important;
}

If you can share which version of the Forest theme you’re using (or a preview link), I can help identify the exact CSS selector responsible for the animation.

4

This worked!

Thank you so much.

5

I’ve tried finding these but to no avail. I did go with another solution. Thank you so much!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

7

ok so first reaction landing on this page… i get that you make cabinet fronts for ikea cabinets, and i get that they’re “affordable,” but affordable compared to what? that’s the thing my brain immediately asks. your hero says “elevate your ikea / designer cabinet fronts made affordable” and then just leaves me hanging on the actual promise.

the word “affordable” is doing zero work without a number next to it. is this 30% less than custom? 60% less? are we talking the price of a nice dinner per door or a car payment? you’ve got a comparison table further down that actually answers this, but burying it past five scrolls means most people bounce before they ever see it. i’d take whatever the punchiest stat in that table is and slap it right in the hero. “designer fronts at half the cost of custom” or whatever your real number is. give people the reason to keep reading in the first two seconds.

second thing, you’ve got eight testimonials sitting down the page doing nothing for the people who never scroll. when i built my store the single biggest jump i got was just dragging proof higher up. a review snippet, a “handcrafted in LA” line, a price range, anything that says “real people bought this and it’s good” needs to be near the top. right now the first thing a visitor sees is nav and a vague CTA and that’s it.

speaking of, the CTA situation is a little muddled. you push “book a free consultation” twice in the nav but honestly most people who land want to just see the doors and the prices. “shop custom cabinet doors” and “shop samples” are the buttons that actually convert browsers, and they’re tucked under secondary copy where people have to go looking. make those the loud, obvious move. the consultation is great for the high-intent folks but it’s not what a cold visitor wants first.

fix the hero promise and lift the proof and i think you see a real difference, the product itself looks legit.

i pull apart dtc sites like this for fun (and used to run my own), there’s a sub r/StoreAudits if you want a deeper look at any of it.