Shrinking the menu and making it sticky

how did you narrowed it? I want to do that, but I’m more noobish ??

Hey Susgepa,

You will need to create a child theme first, this is a must for making these sort of changes.

This page offers a pre-made child theme style.css and other tips for modifying this theme: https://www.pootlepress.com/2015/02/21-tips-tricks-and-css-tweaks-for-woothemes-storefront/

I made my menu this size by doing the following:

1. Installing JetPack and activagint the Custom Store Logo feature, then I uploaded a .png with transparent background in the Appearance > Customizer > Site Title, Tagline, Logo

2. Added this to my child theme’s style.css:

@media screen and (min-width: 768px) {
    /* LOGO */
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 20% !important; /* Use px values if you want, eg. 350px */ }

    /* SECONDARY NAVIGATION */
    .site-header .secondary-navigation { width: 40% !important;  /* Use px values if you want, eg. 350px */ }

    /* SEARCH BAR */
    .site-header .site-search { width: 15% !important;  /* Use px values if you want, eg. 350px */ }
}

3. Then I installed the free extension found here and activated it:
https://www.pootlepress.com/product-category/woothemes-storefont/

Then it was just a matter of tweaking the search bar and logo width in the code i shared above until things started to “line up”.

OK i have gotten much closer!

Making the navigation menu stick was fairly easy, I just added this to my child’s style.css:

/* this will make the navigation header stick to the top o fthe page */
.site-header {
	position: fixed !important;
	width: 100% !important;
}

Then I removed the page title and now I am pretty much where I wanted to be. Except that the search field is still screwy, note how the magnifying glass is not aligned properly?

This is the code in my style.css (child) that I am using to tighten up the header and the search field, I had to use trial and error to get things to align correctly on multiple screens, and I am sure this is not the most effiecent way to do it, i would love pointers on doing it more cleanly.

@media screen and (min-width: 768px) {
    /* LOGO */
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 17% !important; /* Use px values if you want, eg. 350px */ }

    /* SECONDARY NAVIGATION */
    .site-header .secondary-navigation { width: 40% !important;  /* Use px values if you want, eg. 350px */ }

    /* SEARCH BAR */
    .site-header .site-search { width: 15% !important;  /* Use px values if you want, eg. 350px */}

}

/*this is all to resize the navigatino menu */
.search-field   {
	float: left;
	display: inline;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	padding-left: 5px !important;
	padding-right: 0px !important;
	margin-left: 1px;

}

.page-template-template-homepage .site-main {
	padding-top: 5px;
	padding-bottom: 5px;
}

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.site-header {
	padding-top: 5px;
	padding-bottom: 5px;
}

.site-header-cart {
	width: 170px !important;
}

.cart-contents {
	padding-left: 10px !important;
	padding-right: 0px !important;
}

Thanks!

Hi, I think that your bloblem is that in style.scc in line147 .site-header {position:fixed…
That’s why it’s not scrolling

Sory for my inglish ))