How do I add my logo into my mobile navigation?

I am looking for a way to insert my logo in the mobile navigation. Any help would be greatwww.jobspark.ca

There are two steps to this.

The first is to write the code that is going to achieve the effect you require.

The second is to target this code so that it only activates when the display size of the device being used to view the site matches your specifications.

As a starting point, the following should display the company logo on an smart phone in portrait mode for your site.

Insert it into your custom CSS and either scale down the window or check it on a mobile phone. If it works, you can use this as a guide to further customise the mobile display of your site.

@media only screen and (max-width: 640px) {
#header #logo {
   background-image: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original");
   background-repeat: no-repeat;
   margin: 75px auto 0;
}
}

Hope that helps ...

OK, this code could be a lot cleaner and might not be totally accurate, but in the interests of time, simply replace the first block I gave you with this:

@media only screen and (max-width: 640px) {
#header #logo {
           background-image: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original");
           background-repeat: no-repeat;
           margin: 75px auto 0;
        }
.site-tagline {
           position: relative;
           top: -20px;
           visibility: hidden;
        }
#header #logo.logo-image img {
           height: auto;
           max-width: 100%;
           visibility: hidden;
      } 
}

See how that goes.

Ok i updated the code. I have one logo now but it still is not showing up in the top black navigation. I think we made some progress though!

Oh sorry, I didn't realise you wanted it in the top black bar.

That's different ... but if you play around with the code I gave you (take blocks out, check the response) you should be able to figure it out.

For the sake of usability, I'd recommend keeping that mobile navigation bar free of logos and placing the logo underneath instead, but of course, it's up to you.

I will take your suggestion into consideration but first i just want to see what it looks like with the logo made smaller and place on the right hand side. Can you help me those last two things off. Can manage to move just the logo over to the right and make it smaller

Thanks again for all your help!

For sizing and positioning, try the below.

Note the 30% entry in the background command, the addition of padding to the bottom of the menu, the words "center center" in the background command ...

.mobile-nav .show-nav {
   background: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original") no-repeat scroll center center / 30% auto #000000;
   border-bottom: 1px solid #000000;
   color: #FFFFFF;
   cursor: pointer;
   display: block;
   max-height: 50px;
   padding: 1em 40px 50px;
}

@SilverVine when I go to paste this code in the custom css it does not like the background line of code. I'm thinking the /

Yes, I would say that is the issue. So you need to split out the commands manually. Unfortunately, I've run out of time to continue assisting with this one, however these articles will give you all the info you need to sort this out.

You need to look at the CSS rules for background size:

http://www.w3schools.com/cssref/css3prbackground-size.asp

... and background position:

http://www.w3schools.com/cssref/pr_background-position.asp.

Utilising these rules should get you the result you are after (but will require experimentation).

I was able to split the commands. Thank you again for all you help!

SOLVED

.mobile-nav .show-nav {
 background-image: url('http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original');
 background-position: center center;
 background-size: 30% auto;
 background-color: black;
 /* omitted default values */
 border-bottom: 1px solid #000;
 color: #fff;
 cursor: pointer;
 display: block;
 max-height: 50px;
 padding: 1em 40px 50px;
}

Well done!

I did this and it worked but now I can't click the logo to go back to the home page.