How to make full screen navigation menu for Minimal Theme with no space between menu and slider

Technical Q&A
1

I couldn’t figure this out. I am using Minimal Theme. How do I create a “Full Screen” Navigation with no spacing between the menu and the slider image.

I want my menu to look something similar to this site https://www.beautifiedyou.com/

Notice there is no spacing between the menu and the slider image.

2

Hi @BeautyJen ,

Please go to Customize > Header > Menu > Center main menu below logo.

Refer https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/minimal/sections#add-a-menu

After you change, menu will show full, if you want to remove padding between menu and slideshow, go to Assets > timber.scss.liquid and paste this at the bottom of the file:

@media screen and (min-width: 769px){
	.site-header {
		padding-top: 0px !important;
	}
}

Hope it helps!

3

Hi LitExtension,

I tried your code, and it works but not 100%. I changed the code a little and add to theme.scss.liquid file instead.

You can view the edited code below, but there are still 2 gaps on the left and right side of my navigation. You can view my site on www.myskincarestores.com

@media screen and (min-width: 769px){

.site-header {
padding-top: 10px !important;
padding-bottom: 0px;
}
}###

site1.jpg
site1.jpg800×352 29.3 KB

4

Hi @BeautyJen ,

Go to Assets > timber.scss.liquid and paste this at the bottom of the file:

@media screen and (min-width: 769px){
	.site-header .wrapper{
		max-width: 100% !important;
		padding: 0 !important;
	}
	.site-header .site-nav{
		padding: 0 30px;
	}
}

Hope it helps!

5

Hi Litextension,

The new code fixed the navigation bar to full screen width, but now there is a gap between the navigation menu and the slider image. Please take a look at the image below. Help!

site1.jpg
site1.jpg904×368 25.9 KB

6

Hi Litextension,

I figured out how to fix the gap between the navigation bar and the slider image. I add the following code to your code. .site-header { padding-bottom: 0px;****}

@media screen and (min-width: 769px){
.site-header .wrapper{
max-width: 100% !important;
padding: 0 !important;
}
.site-header .site-nav{
padding: 0 30px;
}
}

1 Like