Debut Theme - Removing a border from a menu

Solved
Highlighted
Tourist
4 0 0

Hi,

 

I hope this is an easy one to solve. On my debut themed website I have drop down menus on a main menu. The only issue I have is that when you click on the drop down menu this box appears in blue which looks out of place. Is it possible to have no box there when I click? Note: I only want the blue border box gone and not the actual menu which is in a black border.

 

Shopify.png

 

Thank you in advance

 

Lance

0 Likes
Highlighted
Explorer
54 3 12

You can go into your theme's stylesheet and change the border color to match the white background.

 

open the stylesheet, using CRL+F or CMD+F and search for

.site-nav_dropdown

 

Change border color to white.

.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  padding: 11px 30px 11px 0;
  margin: 0;
  z-index: $z-index-dropdown;
  text-align: left;
  border: 1px solid white;
  background: $color-bg;
  left: -1px;
  top: 41px;

 

If you are fine changing all the border colors on your site to white, you can also do it through the customize theme area, under theme settings > colors > borders and lines.

 

Hope this helps.

https://drdigitaldev.com Custom Digital Agency Site Built Entirely on Shopify
1 Like
Highlighted
Tourist
4 0 0

Hi Dakota_Smith,

 

Thanks for the fast response.

 

I had some trouble finding the below code you mentioned. This is where I was searching. Please tell me if I have done it wrong. 

 

Capture.PNG

 

You also mentioned that I can navigate through the theme menu area to change the color scheme. I have been through there before but changing the border color only changes the color of the drop down box border. I am trying to remove the blue box border around the parent menu. 

 

2e2.PNG

 

 

Thanks

Lance 

0 Likes
Highlighted

Success.

Explorer
54 3 12

I misread your original post. Apologies.

Try changing:

.site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 10px;

  @include media-query($medium-down) {
    font-size: $font-size-base;
  }

  &:focus ,
  &:hover {
    color: $color-text-focus;
  }
}
To this:
.site-nav__link--button {
border: none;
background-color: transparent;
padding: 3px 10px;

@include media-query($medium-down) {
font-size: $font-size-base;
}

&:focus {
outline: 0;
}
&:hover {
color: $color-text-focus;
}
}

 

https://drdigitaldev.com Custom Digital Agency Site Built Entirely on Shopify
3 Likes
Highlighted
Tourist
4 0 0

Sorry, I couldn't find the code anywhere. This is what I see. Its seems like different format that yours.

 

shop.PNG

0 Likes
Highlighted
Explorer
54 3 12

It is in the theme.scss.liquid file under the assets folder. Open that file and use the search console via CRL+F or CMD+F to find the css class :

.site-nav__link--button

https://drdigitaldev.com Custom Digital Agency Site Built Entirely on Shopify
2 Likes
Highlighted
Tourist
4 0 0

Awesome! Looks perfect now without that blue border.

 

Thanks for the help,

 

Lance

0 Likes
Highlighted
New Member
2 0 0

Hej Dakota_Smith,

 

Thanks for the clear explanation, it worked perfectly for me.

 

However, I still have a blue rectangle appearing next to the "Sort for" function as shown in the image here below.

 

Where should I edit the code to make it disappeare?


Cheers,
Adriano

 

Screen Shot 2019-04-08 at 23.27.40.png

 

0 Likes