[gonzalo]

Hi,

I’m working on my first WP site, and I’m using Nirvana theme.
What I want:

*desktop: display header (done)
*mobiles: hide header and insert an image (logo) into the mobile menu -I mean at the right of the horizontal lines, there’s free space there.

I’ve found
<?php if ($nirvana_mobile=="Enable") { ?> nirvana_mobilemenu_init(); <?php } ?>
on themes/nirvana/includes/theme-functions.php but that was all to me…

I appreciate any help!

[Ad]

Yes I’ve the same issue so id be well pleased if someone has a solution. I am using Nirvana which i might say I’m loving. I have searched all over but cannot find a simple solution to this problem – i want to put my logo in the menu bar – like Apple do on there site, and many others. Please, can this be done on Nirvana. If so then direction would be ace and another Earthican will smile in his sleep.

[Patrick]

@ gonzalo

If I understand correctly; you’de like to place an image (logo) next to the unfold-menu button (3 horizontal lines) in the mobile layout – right?
You can accomplish this in Nirvana (tested in version 1.1.2) using css:
First upload your image. Next add 1 of the 3 the following css-code to the “CUSTOM CSS” section in Nirvana (don’t forget to adjust the path to the image):

/* Replace menu-button in mobile-layout with own image */
#nav-toggle span::before { content: url(http://www.yourwebsite.com/path/to/image.png) !important; }

– or –

/* Add image in front of mobile-layout menu-button */
#nav-toggle span::before { content: url(http://www.yourwebsite.com/path/to/image.png)" " !important; }

– or –

/* Add image behind mobile-layout menu-button */
#nav-toggle span::after { content: url(http://www.yourwebsite.com/path/to/image.png); }

Note: The unreadable sign  is actually a font (elusive) and represents the 3 horizontal lines. Copy and replace this single letter (character) from your website into the css-code if the menu-button gets unreadable.

Hopefully this helps you (& others too).

[Author]

Posts