Solved

Removing border on navigation menu on Crave theme

MoonRoosterLLC
Shopify Partner
7 1 2

Hello, 

I want to remove the bottom border (white line) on the nav menu that separates it from the hero banner. Can you please help?

Screenshot 2024-03-07 at 14.33.04.png

Brian Lalli
Accepted Solutions (2)

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello MoonRoosterLLC,

To remove the bottom border on the navigation menu you'll typically need to modify the theme's CSS,

Here's a general guide on how to do this:

1. Access Theme Customization

  • Log in to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  • Find the Crave theme and click on the "Actions" dropdown menu.
  • Select "Edit code."

2. Locate the CSS File

In the left-hand sidebar, under the "Assets" folder, locate and click on the Base.CSS File.  

 

3. Find the Navigation Menu Styles

  • Use your browser's search function (usually Ctrl + F or Cmd + F) to search for the CSS class or ID associated with the navigation menu.
  • Look for properties related to borders, such as border-bottom or border.

4. Remove the Border

  • Once you've located the relevant CSS code, you can remove the border by deleting or commenting out the lines of code that set the border.
  • For example, if you find a line like border-bottom: 1px solid #fff;, you can delete this line or comment it out by adding /* before the line and */ after the line.

Save Changes

 

Here's an example of what the CSS might look like:

 

/* Navigation menu styles */
.nav-menu {
  border-bottom: 1px solid #fff; /* Remove or comment out this line */
}

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

MoonRoosterLLC
Shopify Partner
7 1 2

This is an accepted solution.

Replies 6 (6)

deepaksharma
Shopify Partner
448 62 92

hey @MoonRoosterLLC 

I really want to help but I will be needing your store url along with password if any

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
MoonRoosterLLC
Shopify Partner
7 1 2

https://tr-healthy-bites.myshopify.com/
Password: MoonRooster711!

Brian Lalli

Made4uo-Ribe
Shopify Partner
5581 1344 1658

Hi @MoonRoosterLLC 

Would you mind to share your store URL?Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MoonRoosterLLC
Shopify Partner
7 1 2

This is an accepted solution.

https://tr-healthy-bites.myshopify.com/
Password: MoonRooster711!

Brian Lalli

Dan-From-Ryviu
Shopify Partner
7577 1465 1462

Hi @MoonRoosterLLC 

You can remove that line from your Online Store > Themes > Customize > Header, uncheck Show separator line optionScreenshot 2024-03-08 at 10.53.46.png

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello MoonRoosterLLC,

To remove the bottom border on the navigation menu you'll typically need to modify the theme's CSS,

Here's a general guide on how to do this:

1. Access Theme Customization

  • Log in to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  • Find the Crave theme and click on the "Actions" dropdown menu.
  • Select "Edit code."

2. Locate the CSS File

In the left-hand sidebar, under the "Assets" folder, locate and click on the Base.CSS File.  

 

3. Find the Navigation Menu Styles

  • Use your browser's search function (usually Ctrl + F or Cmd + F) to search for the CSS class or ID associated with the navigation menu.
  • Look for properties related to borders, such as border-bottom or border.

4. Remove the Border

  • Once you've located the relevant CSS code, you can remove the border by deleting or commenting out the lines of code that set the border.
  • For example, if you find a line like border-bottom: 1px solid #fff;, you can delete this line or comment it out by adding /* before the line and */ after the line.

Save Changes

 

Here's an example of what the CSS might look like:

 

/* Navigation menu styles */
.nav-menu {
  border-bottom: 1px solid #fff; /* Remove or comment out this line */
}

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here