Add logo to mobile nav bar

010101

Add logo to mobile nav bar

Logo in nav bar screenshot

You will need to adjust the height and width (background size and width/height should match each other) depending on the shape of your logo. You may also need to adjust the top margin.

If your logo is long, this may not work well. My advice is to create a secondary logo. For example, Coca-Cola has their long script logo of their name. That’s too long for this. But, they also have a Coke bottle logo. That would work great. Usually your fav icon is square and so that’s an option.

@media (max-width: 767px) {
.Navigation.ButtonGroup.App-backControl::after {
background-image: url('/logo.png');
background-size: 35px 35px;
display: inline-block;
width: 35px; 
height: 35px;
margin-top: 5px;
content:"";
}
}

girefko

010101 Love it, thanks!! Any idea how to Redirect to the home page when clicked?

hrvoje_hr

Great idea!

Hopkins

Nice!

010101

girefko No, not off the top of my head. There’s JavaScript that can say, “Look for this element, add this link around it.” Adding JavaScript like this to your footer could potentially work. I’m too busy to look up the code. Do some googling is all I can suggest right now. 😅

Subarist

Thanks , it looks perfect

Valeyard

At the risk of double-posting, this is how to do it if you want the icon on the left and part of the button:

@media (max-width:767px) {
  .App-primaryControl > .Button--icon, .App-titleControl > .Button--icon, .App-backControl > .Button--icon {
    width: auto;
  }
  .Navigation.ButtonGroup.App-backControl > .Button:before {
    content: "";
    float: left;
    position: relative;
    top: -6px;
    width: 45px;
    height: 32px;
    background: url(https://i.postimg.cc/3Nz5rfXW/Flarum-32x32px.png) top left/contain no-repeat;
    display: inline-block;
  }
}