Jump to content

How do I add my logo into my mobile navigation?

Recommended Posts

  • Replies 13
  • Views 6.3k
  • Created
  • Last Reply

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 comment

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 comment

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!

Link to comment

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 comment

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 comment

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 comment

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 comment

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

Link to comment
  • 2 years later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.