How to remove line in theme Brooklyn

Solved
Tourist
10 0 2

Hi, how to remove the line under the shop, when i hover with the mouse on the shop, there is a dropdown and the line is under shop, theme is Brooklyn.

0 Likes

Success.

Shopify Partner
1843 170 525

Hi Bali,

 

You will need to go to Online Store > Themes, then Actions > Edit code and from within the left pane of files and folders, you open Assets / theme.scss.liquid. Inside theme.scss.liquid, search for this bit of code

 

.site-nav--has-dropdown {
  > a {
    position: relative;
    z-index: $zindexNavDropdowns + 1;
  }

  &:hover > a,
  > a.nav-focus,
  &.nav-hover > a {
    color: $colorNavText;
    background-color: $colorNav;
    opacity: 1;
    @include transition(none);

    &:before {
      content: "";
      position: absolute;
      left: $gutter / 2;
      right: $gutter;
      bottom: 0;
      display: block;
      background-color: $colorNavText;
      height: 1px;
      z-index: $zindexNavDropdowns + 1;
    }
  }

The CSS ::before pseudo element is responsible for that underline. So if you simply remove it, it will be gone. You will want to end up with this

 

.site-nav--has-dropdown {
  > a {
    position: relative;
    z-index: $zindexNavDropdowns + 1;
  }

  &:hover > a,
  > a.nav-focus,
  &.nav-hover > a {
    color: $colorNavText;
    background-color: $colorNav;
    opacity: 1;
    @include transition(none);
  }

That's all there is to it.

 

Hope this helps!

I turn coffee in to code - since 1998
2 Likes
Highlighted
Shopify Partner
1843 170 525

Sorry, duplicate post. The forum sometimes has some hiccups.

I turn coffee in to code - since 1998
1 Like
Tourist
10 0 2

Thank you

1 Like