[Jamain FParticipant]

I’ve been searching the forum and every solution that I found and tried was unsuccessful. What I would like to do is change the colors of the mobile menu and also the break point between the mobile menu and the main menu. The main menu shifts down into the content below instead of switching to the mobile view.

I also would like to know how I can achieve a look like what X has in the forum mobile view as pictured below.

The site is http://visitmrc.org/wordpress/visitors-area/ and I’m using the Ethos Child theme.

[CousettMember]

Thanks for writing in!

Try adding add some CSS code under Appearance -> Customize -> Custom -> CSS

@media (max-width: 979px)
.masthead-inline .x-btn-navbar {
display: block;
float: right;
color: red;
background-color: black;
}

Change “red” and “black” for whatever color you are looking for either in its short name or hex value.

Change @media (max-width: 979px) to what you want the new breakpoint to be.

[Jamain FParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Pleas add this code instead of our last suggestion:

.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 50px;
border: 1px solid #eee;
padding: 0 14px;
overflow: hidden;
background: #fafafa;
color: #444;
width:100%;

}
i.x-icon-bars:after {
content: 'Navigation';
padding: 0 10px;
}
@media (max-width: 979px){

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 172px;
}
}

To prevent menu item jumping add this code:

@media (max-width:1104px){
.x-navbar .x-nav > li > a {
padding: 0 12px;
}
}

Hope it helps.

[MerkyDParticipant]

I added this to my custom CSS (#123125)

.masthead-inline .x-btn-navbar {
display: block;
float: right;
color: red;
background-color: black;
}

but I only want the menu icon on mobile. How can I change visibility in the above code?

[CousettMember]

Preface it with a media query such as

@media (max-width: 979px)

[Author]

Posts