Adding the word "Menu"

todd_fooshee · December 2015

I want to be able to utilize just the hamburger style menu icon to display menu options, but because of older individuals coming to the site that may have no idea what that icon means, can i add the word "Menu" somewhere so that it is displayed to the left of the menu?

Albert · December 2015

Hi,

yes, you can do this under Theme options > Responsive section.

Thanks!

todd_fooshee · December 2015

Thank you for the response, but this doesn't allow me to keep the existing menu icon. It just replaces it with the text. Is there a way to keep both?

Albert · December 2015

Yes, it is possible to keep both of course. In the field we mentioned above, you supposed to type:

<i class="icon-menu"></i> Menu

todd_fooshee · December 2015

Thank you so much!

Albert · December 2015

You're welcome

todd_fooshee · December 2015

I added it, and it worked. The problem now though, is they're on separate lines. Where can i edit the styling to see if I can get them to be on the same plain?

Here's the link to view:

http://anchorfaith.com/igniteimpactinfluence/

Albert · December 2015

Below css will do the trick:

.header-simple #Header a.responsive-menu-toggle { width: 100px !important; }
.header-simple #Header a.responsive-menu-toggle i {
    position: relative;
    top: 2px;
}

todd_fooshee · December 2015

That worked great for the desktop view. Thank you so much.

Concerning mobile, is there a way I can shift my logo over to the left side rather than being centered so I can offset the balance with the menu being on the right?

Albert · December 2015

You can remove left margin for logo on mobile devices with below css:

@media only screen and (max-width: 767px) {
    #Top_bar .logo #logo { margin-left: 0 !important; }
}

Adding the word "Menu"

Comments