Logo on Menu

• 

  kwlimo · Member · Oct 27, 2017 at 10:52 am

  • Copy link
  • Add topic to favorites

  Good Morning!
  I need some css help. :( The main logo I have left out of the header, as it was interfering with the video text. I would like to add the logo to the menu on the left side, so when the page scrolls, its always visible. Any help appreciated!

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Oct 27, 2017 at 11:30 am

  • Copy link

  Morning!

  Can you try adding the following custom CSS to your site?

  @media screen and (min-width: 48em) {
      #site-navigation:before {
          content: "";
          background-image: url(https://kwlimo.files.wordpress.com/2017/10/cropped-untitled-13.jpg);
          background-size: 100%;
          background-repeat: no-repeat;
          width: 90px;
          height: 90px;
          display: inline-block;
          float: left;
      }
  }

  In the above CSS, switch the image URL to https://kwlimo.files.wordpress.com/2017/10/cropped-untitled-13.jpg with the URL for any image you wish to display as your logo.

  You can also increase/decrease the values of width and height to your liking.

  The above will also only add the logo to the desktop version of your theme, it’d be a little tricker to get the logo to look good across smaller devices.

  Let me know if that works well for you!

  I also wanted to make sure that you’re aware that, as a WordPress.com Premium owner, you have access to private prioritised support via our contact form here:

  https://wordpress.com/help/contact

  Please feel welcome to either reply back here or contact us via the above form with extra questions.

• 

  kwlimo · Member · Oct 27, 2017 at 11:38 am

  • Copy link

  Hey! It kinda worked. I wanted the white logo, but it worked nonetheless! Ill just need to find a way to move it to the left so it shows the complete logo. You got me going in the right direction! Thank you!

• 

  siobhyb · Member · Oct 27, 2017 at 1:12 pm

  • Copy link

  I’m glad that helped! I did some playing with the image you’ve added and setting the background-size to 100% and width to 200px seems to work well:

  @media screen and (min-width: 48em) {
      #site-navigation:before {
          content: "";
          background-image: url(https://kwlimo.files.wordpress.com/2017/10/kwfinallogo_version21.png);
          background-size: 100%;
          background-repeat: no-repeat;
          width: 200px;
          height: 60px;
          display: inline-block;
          float: left;
      }
  }

  It sounds like you’re comfortable experimenting further though, so definitely have a play and let us know if extra questions come up. :)

• 

  kwlimo · Member · Oct 27, 2017 at 8:02 pm

  • Copy link

  Yep! That worked again. Thank you. One more thing. Possible to change the colour of the Menu? I like the blue pages, but want to darken that area where the logo is.

• 

  siobhyb · Member · Oct 28, 2017 at 4:55 pm

  • Copy link

  Sure! You could change that with the following custom CSS:

  .navigation-top, .main-navigation>div>ul {
      background-color: #663399;
  }

  You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

  http://www.color-hex.com/

  Hope that’s helpful and that you enjoy the rest of your weekend.

• 

  kwlimo · Member · Oct 29, 2017 at 1:08 pm

  • Copy link

  Nice! Thank you again!

• 

  siobhyb · Member · Oct 30, 2017 at 8:14 am

  • Copy link

  Any time! :)