Docs

[afleischer]

Hi guys,

I’m re-creating the design of an existing site, and i’m having trouble creating a small gap between the nav menu and the content below. I’m creating the new site on a subdirectory of the current site (info below). I’m using the Ethos stack, with a stacked header. Any help would be greatly appreciated!

Best,
Andrew

[afleischer]

This reply has been marked as private.

[Christopher]

Hi there,

I would like to check your website but it’s under maintenance mode, please provide us with login credentials.

For the meantime, please add following code in Customize -> Custom -> CSS :

.x-navbar{
margin-bottom:10px;
}

Hope it helps.

[afleischer]

Hi Christopher,

I just disabled maintenance mode for you – I entered the code above into the customizer, but it didn’t work unfortunately.

The margin-bottom code from above has no effect until it’s over 34px which is the height of the nav menu bar. Anything above 34px just adds space that’s the same #333333 color as the page body, instead of creating a small “gap” below the nav menu with the background #222222 color, which is what I need.

Also, here’s my existing custom css code in case anything is overriding it:

/*Background on sides of main content*/
.x-container.main:before {
background-color: #222222;
}

/*Makes logobar background dark gray*/
.x-logobar {background-color: #222222;}

/*Removing borders of main & dropdown menu items*/
.x-navbar {
border: none;
border-bottom: 0;
}
.x-logobar {
border: none;
}
.x-navbar .desktop .x-nav > li:first-child > a, .x-navbar .desktop .x-nav > li > a {
border: none;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
}

/*Aligns Nav Menu Left*/
.x-navbar .desktop .x-nav {
float: left;
}

/*Aligns Logo Text Left*/
.x-logobar {
text-align: left;
}

/*Removes left/right padding for logo/navbars*/
.x-navbar-inner .x-container.max.width {
width: 100%;
max-width: none;
}
.x-logobar-inner .x-container.max.width {
width: 98%;
max-width: none;
}

/*Main menu item hover color to #222222, sub-menu background to #222222, sub-menu hover to #333333*/
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
background-color: #222222 !important;
}
.sub-menu {
background: #222222 !important;
}
.sub-menu > li > a:hover, .sub-menu > li.current-menu-item > a {
background-color: #333333;
}

/*Nav menu height*/
.x-navbar .desktop .x-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}

/*Remove top & bottom sub-menu padding */
.x-navbar .sub-menu {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

/*Make home page background gray*/
.page-id-13 .site{
background-color:#333333;
}

/*Make sub-menu dropdown start beneath nav menu*/
.masthead-stacked .x-navbar .desktop .sub-menu {
top: 34px;
}

[Rupok]

Hi there,

Thanks for updating. You can try this CSS :

.x-navbar {
  border-bottom: 5px solid #222222;
}

Hope this helps.

Cheers!

[afleischer]

That is a brilliant solution, works like a charm! I did the same thing on .x-colophon using border-top to create a gap above the footer. Thank you guys, A+ support as always!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts