Picture of James Yorke
Logo in Nav bar
by James Yorke - Wednesday, 20 December 2017, 11:38 AM
 

Hi all

please can someone help and give me the xmas gift of knowledge!

Trying to add my logo to the nav bar using the framework- have followed various posts and have the following code is about a million different less files

.page-logo {

   background-image:url(src/assets/my-logo.jpg);
   display:inline-block;
   margin-left:25%;
   @media all and (max-width:700px) {
      background-image: url(src/assets/my-logo.jpg);
      height:0px;
      width:0px;
      margin-left:0px;
 }

 

I then have this is navigation.hbs

<div class="page-logo"></div>

 

yet I cant get the logo to display, please what have I missed!!

 

Thanks

 

James

 

 

 

Picture of Matt Leathes
Re: Logo in Nav bar
by Matt Leathes - Wednesday, 20 December 2017, 3:05 PM
 

This path isn't right:url(src/assets/my-logo.jpg)

If you have put my-logo.jpg in your theme's assets folder then it will be copied into build/adapt/css/assets when you run grunt build or grunt dev.

As you need to make paths relative to the CSS file, the correct path will be assets/my-logo.jpg.

And navigation.less is probably the best place to add your .page-logo class

Picture of James Yorke
Re: Logo in Nav bar
by James Yorke - Friday, 26 January 2018, 3:30 PM
 

Hi so I have returned to this and still cant get it to work

on checking the build folder there is the logo as you said however it still wont show up

Navigation.hbs looks like this

 

navigation. Less looks like this

 

 

files i've moddified are

adapt2\src\theme\adapt-contrib-vanilla\less\src\navigation.less

\adapt2\src\core\templates\navigation.hbs

 

so...what am I doing wrong please :)

 

Picture of James Yorke
Re: Logo in Nav bar
by James Yorke - Friday, 26 January 2018, 4:14 PM
 

sorry just noticed my images didn't upload so heres the snipets of code

 

navigation.hbs

event="toggleDrawer" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}"></button>
 <div class="page-logo"></div>
</div>

navigation. Less

.page-logo {

   background-image:url(assets/logo.jpg);
   display:inline-block;
   margin-left:25%;
   @media all and (max-width:700px) {
      background-image: url(assets/logo.jpg);
      height:5px;
      width:0px;
      margin-left:0px;
 }
 }

 

Thanks

Picture of Ignacio Cinalli
Re: Logo in Nav bar
by Ignacio Cinalli - Friday, 26 January 2018, 4:44 PM
 

Hi James, try to add width and height to css rules

.page-logo {

   background-image:url(src/assets/my-logo.jpg);

   height: 50px;

   width: 50px;

}

Regards

Picture of Matt Leathes
Re: Logo in Nav bar
by Matt Leathes - Friday, 26 January 2018, 4:38 PM
 

Your response seems to be missing some info?

Picture of James Yorke
Re: Logo in Nav bar
by James Yorke - Friday, 26 January 2018, 6:30 PM
 

Hi Matt do you mean the two images thst didn’t post and I then posted the text of these after in a sepetate post or something else?!

 

as always thanks for your help

 

James 

Picture of Ignacio Cinalli
Re: Logo in Nav bar
by Ignacio Cinalli - Friday, 26 January 2018, 7:16 PM
 

Have you tried adding width and height attributes?

.page-logo {

   background-image:url(src/assets/my-logo.jpg);

   height: 50px;

   width: 50px;

}

Picture of Robert Peek
Re: Logo in Nav bar
by Robert Peek - Tuesday, 30 January 2018, 9:45 AM
 

I developed this which you could try:

https://github.com/deltanet/adapt-logo

 

Picture of Cormac O'Keeffe
Re: Logo in Nav bar
by Cormac O'Keeffe - Wednesday, 7 February 2018, 2:59 PM
 

Hi, 

I had a similar issue with the logo. What I found was that if I made sure that the dimensions of the image were identical to the dimensions in the navigation.less file, the image showed. Changing those to anything other than 1:1 correspondence, and you're in trouble. E.g.,

.navigation-inner {

.logo {
margin-top: 12px;
margin-left: 25px;
float: left;
width: 45px; /*change this to the same width as your logo image*/
height: 17px; /*change this to the same height as your logo image*/
       background-image: url(assets/logo2.png);
}

If you're not sure how to find out the dimensions of your image, (for MacOS) just click right and choose 'Get Info' and you'll find the dimensions.