Docs

[kateanita]

Hello,

I’ve moved my hamburger menu inline on mobile – I have the logo and nav stacked on desktop. I have everything worked out except that now I cannot figure out how to fill in the top navbar with the same transparent blue color.

Here is the webpage: http://homefed.stapkodesign.com/

And here is the code I have so far to move the hamburger inline:

@media (max-width : 979px) {
.x-brand {
  background: url(/wp-content/uploads/2016/11/footerlogo.png) no-repeat top left;
  background-size: 20% auto;
	width: 80%;
  min-width: 200px;
  height: 40px;
}

.masthead-stacked .x-navbar {
    background: rgba(1, 38, 57, 1) !important;
  }
  
.masthead.masthead-stacked .x-logobar {
  float:left;
  margin-left:20px;
  width:72px;
    }
.masthead.masthead-stacked .x-navbar-wrap {
  float:right;
  margin-right: 20px;
  margin-top:14px;
  background: rgba(1, 38, 57, 0.75) !important;
    }
  
.x-brand img {
display: none;
}
}

I’m using Ethos and all software is up to date.

Thank you!

Katie

[Christopher]

Hi there,

Please remove this code :

.masthead.masthead-stacked .x-logobar {
  float:left;
  margin-left:20px;
  width:72px;
    }

Add this one :

@media (max-width: 979px){
.masthead-stacked .x-navbar {
    top: -86px;
}
}

Hope it helps.

[kateanita]

That worked, thanks so much!

[Joao]

Glad to hear it,

Joao

[Author]

Posts