Storefront header – nav menu height

Was able to fix Nav menu height and hide Title page name. Now stuck on inserting margin under Nav menu, between bottom of Nav menu and top of slider on Home page. Would love a little css help! website: https://vrt1bx6kzzz.c.updraftclone.com/

Here’s where I am now with CSS.
/* Nav menu color */
.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
background-color:#a29261;
}

/* .home h1.entry-title {
color: #bada55;
display:none;
}
*/
/* Hide title on homepage */
.home .entry-header {
display: none;
}

.site-header {
padding-top: 1;
}

/* Masthead */
#masthead.site-header {
padding-bottom: 0;
}

#masthead.site-header {
height: 185px!important;
margin-bottom:20px
}

.storefront-breadcrumb {
padding-top: 25px;
margin-bottom: 1px
!important;
}

/* Mobile CSS for Masthead */
@media only screen and (max-width: 320px) {
#masthead.site-header {
height: 90px!important;
margin-bottom:0px;
}
}

/* Masthead menu */
.storefront-primary-navigation a, .cart-contents a {
padding:5px 15px !important;
}

.main-navigation .primary-navigation li a {
padding:5px 15px !important;
}

/*.main-navigation ul {
padding:0 0 0px 0px!important;
} */
.main-navigation li {
height:37px!important;
margin-bottom: 0px;
}

/* Mobile CSS for Masthead menu */
@media only screen and (max-width: 320px) {
.main-navigation ul {
background:#D6DDE4!important;
}
}

/* Header area */
.site-header {
padding-top:8.5em;
}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
margin-bottom: -9px;
}

/* Search bar size */
input#woocommerce-product-search-field-0 {
height:10px;
}
.site-search .widget_product_search form::before {
top:0.55em;
}

/* footer space */
.site-footer {padding:12px 0}
.site-info {padding:10px 0}

/* widget footer */
.footer-widgets {padding-top:9px}

/* reduce widget title padding */
.widget .widget-title, .widget .widgettitle {padding: 0 0 10px;}

/* remove storefront credit in footer */
.site-info {
display: none;
}

Hi there, are you looking for some CSS like this?

.home .site-content {
  margin-top: 50px;
}

@jarretc Thank you! Worked great!

Now looking at mobile version, header is not displaying properly, does not seem responsive. Any suggestions?

Looks like you have a bit of custom CSS in there around the mobile display of the primary navigation. If you remove the CSS targeting the display of the menu, does it display better on mobile?

I removed the mobile-only CSS and still not displaying header properly in mobile or nav menu.
Screenshot: https://www.dropbox.com/s/e64tnopzvth8uxf/2020-03-12%2010.06.15.jpg?dl=0

I’d greatly appreciate suggestions.

• This reply was modified 4 years, 8 months ago by cranney.

Based upon the CSS you have at the time of this reply, the following should fix it

@media screen and (max-width: 568px) {
  #page #masthead {
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    height: auto !important;
    padding-top: 80px;
  }
  .main-navigation .menu-toggle {
    background-color: initial !important;
  }
}

@jarretc thank you so much, that did the trick!

This thread can be closed