How to remove Black bar under navigation menu in venture theme

Solved
Highlighted
Tourist
4 0 2

Hello, hope everyone is well during these covid times.

I have been using this time to learn and perfect my website however, It seems that finding information about certain things is extremely difficult.

My website is PVReefs.com and as you can notice under the navigation bar there is a black bar occupying unnecessary space.

Capture.PNG

I have did my best trying to find the code for that and no luck so far. I am using the venture theme as a base.

If anyone has any idea what I might have to do, Please help a brother out!

Thanks

0 Likes
Highlighted
Shopify Expert
55 10 21

This is an accepted solution.

Hey @PVReefs!

The Venture theme is designed to show a top margin for the page content (60px on desktop and 30px on mobile), and this is why you are seeing a black bar on your store underneath the navigation bar. To remove the margin you'll need to edit your theme's stylesheet. You can edit your theme's stylesheet in the Shopify admin by going to Online Store > Themes > Actions > Edit code. Once in the code editor, you will want to open the Assets folder shown on the left panel. Inside of this folder you'll find your theme's stylesheet; for the Venture theme the file should be named theme.scss.liquid

Click the link to open/edit the file referenced above, and scroll all the way down to the bottom (it will be a very large file - over 6,000 lines of code). Once at the bottom of the file, add in the following ruleset and then click the 'Save' button:

/* Remove top margin from page content */
.page-container .main-content {
  margin-top: 0px;
}

Once you save the edit to the theme's stylesheet, you should see the change show up on the storefront after refreshing your browser's cache. Please note that the ruleset above will remove the top margin from both desktop and mobile. 

 

Hopefully this helps!

Kyle W | Helium Dev, LLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Helium builds user friendly apps with top-rated US-based support
Our apps: Customer Fields & Meteor Mega Menus
Highlighted
Shopify Partner
67 15 16

This is an accepted solution.

Hello @PVReefs ,

Go to Online Store > Themes > (Published Theme) > click Actions and select Edit code. And then search for theme.scss.liquid file, open it and paste the below code at the very bottom end and save it. That's all you need to do.

@media only screen and (min-width: 750px){
	.main-content {
	    margin-top: 1px !important;
	}
}

 

I hope this be helpful to you.

 

Thanks,

Nitin

0 Likes
Highlighted
Tourist
4 0 2

Thank you so much Kyle! what an easy solution haha for something I've been trying to figure out for days! Thanks again!

Highlighted
Tourist
4 0 2

Thanks Nitin! Very helpful