Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I add my logo into my mobile navigation?


chrisschilling
Go to solution Solved by silvervine,

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

13 answers to this question

Recommended Posts

  • 0

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;
}



Link to post
  • 1

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.

Link to post
  • 0

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 ...

Link to post
  • 0

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.

Link to post
  • 0

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

Link to post
  • 0

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).

Link to post
  • 0

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;
}

Edited by chrisschilling
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...