Add text to Mobile Menu

[Marc]

I would like the mobile menu to have the text as seen here:

Home

when you shrink down the screen size, the mobile menu has an icon with text, oppose to my site which has just the icon.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Please see: http://www.swiftideas.com/knowledgebase/how-to-add-menu-text-before-the-mobile-menu-icon/

– Kyle

[Marc]

Unfortunately that didn’t work. I added the script the the custom CSS page in the theme. Should I be adjusting php files?

-M

[Kyle – SUPPORT]

You should add that code to Theme Options > Custom CSS

– Kyle

[Marc]

Yep, I added it there.
Still no go

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

nav.mega-menu ul.menu {
text-align: left;

#logo a.mobile-menu-show i:after {
content: “MENU”;
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
}

You haven’t closed the nav.mega-menu ul.menu rule with a }

– Kyle

[Marc]

Mmm I fixed the error, but still no luck. Below is what I have in the custom css.

#logo a.mobile-menu-show i:after {
content: “MENU”;
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
}

[Marc]

Here is the whole css
——————-

@media only screen and (max-width: 767px) {
.sticky-header-resized #logo {
height: 150px !important;
}

@media only screen and (max-width: 767px) {
div.inner-page-wrap{padding-top:50px !important}
}

@media only screen and (max-width: 480px) {
#logo img {
display: none!important;
}
#logo {
background: transparent url(‘http://192.185.91.211/~kieslers/wp-content/uploads/2014/05/baby_logo.png’) no-repeat center left;
background-size: 233px 150px;
width: 233px;
}
#logo a {
height: 150px;
color: #fff;
}

#top-bar {
height: 33px;
padding: 0px 0;
}

#top-bar a {

font-size: 100%;

color: #ffffff;
}

#top-bar {

color: #ffffff;
}

#footer p {
font-size: 90%;
line-height:110%;
}

#footer a:hover {color:#FFFFFF!important;}
#footer a:visited {color:#FFFFFF!important;}
#footer a:link {color:#FFFFFF!important;}

#footer {
padding: 5px 0 0;
height: 25px;
}

.full-width-text {
padding: 0px;

}

baby_photo{
width: 390px;
}

div.comments-likes{display:none;}

nav.mega-menu ul.menu {
text-align: left;}

#logo a.mobile-menu-show i:after {
content: “MENU”;
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
}

[Marc]

Is
#top-bar a {

font-size: 100%;

color: #ffffff;
}

#top-bar {

color: #ffffff;
}

—————

MAking the menu not appear ???

[Rui Guerreiro – SUPPORT]

Hi,

This first block also missing a closing bracket

@media only screen and (max-width: 767px) {
.sticky-header-resized #logo {
height: 150px !important;
}

I’m also not seeing the closing bracket for this one

@media only screen and (max-width: 480px) {

The first thing when you create a media query is to create a structure like this

@media only screen and (max-width: 480px) {

}

And place the css code that you want for that resolution inside that way you wont get lost in the closing brackets.

-Rui