Reduce height of Primary Navigation menu

  • Resolved gmsiegel

    (@gmsiegel)


    6 years, 9 months ago

    I’m trying to reduce the space below the Primary Navigation menu, so that the featured image is higher up, and closer to the menu. There’s too much space now. I’ve tried to find a height attribute of a menu container or even trying margin-bottom CSS to no avail. Any help is greatly appreciated. Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @gmsiegel – I’ve had a look at your site. Can it be you found a solution already because I can’t see any space between the featured image and the menu:


    Link to image: https://cld.wthms.co/1hKNhN

    Thread Starter gmsiegel

    (@gmsiegel)

    Job-
    Thanks for looking at this. Yes, I was able to get it sorted. I ended up using the following CSS:

    /* Masthead */
#masthead.site-header {
	height: 155px!important;
	margin-bottom:0px
}

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

/* Masthead menu */
.storefront-primary-navigation a, .cart-contents a {
	margin:0 0 0 0;
}

.main-navigation ul {
	padding:0 0 10px 4px!important;
}
.main-navigation li {
	height:38px!important;}

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

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

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
margin-bottom: -45px;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Reduce height of Primary Navigation menu’ is closed to new replies.