Home>Support>Logo Navigation Bar

Logo Navigation Bar

By roland, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi, Here’s my concern, I want to place my logo on navigation bar on menu ( top left ), But when I change the masthead layout and make it ” logo in menu ” the icon is too small, My question is is there a possible way to make my icon on my navigation bar bigger?

thanks!

Private Snippet

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Magus
    Hi, I Work Here

    Hi Chiaraspastry,

    Please try adding this to your custom CSS

    header.masthead-logo-in-menu#masthead .logo {
    padding: 0 !important;
}
header.masthead-logo-in-menu#masthead .logo > img {
    max-height: 100px !important;
}

    Hope this Helps

    Magus

  2. 9 years, 6 months ago roland

    Hi magus thank you so much, I have another question, is it possible for the logo to make bigger than the navigation bar? I want navigation bar to stay that big and my logo more bigger atleast 50% bigger than the Bar. :)

    thank you so much again :)

  3. 9 years, 6 months ago Magus
    Hi, I Work Here

    Hi chiaraspastry,

    I don’t believe that will be possible just with custom css. The Logo is part of the masthead, so resizing that beyond what we already have would expand the masthead down. The only way I can see it being done is by having the logo in it’s own div floating over the masthead but this would involve making changes to the theme itself through a child theme. I think it would be best to let Addo or Andrew continue from here.

    Sorry I cannot be of more help

    Magus

  4. 9 years, 6 months ago Daniel
    Hi, I Work Here

    Hi Chiaraspastry

    Am glad your making progress in developing your site. The following custom css will make you logo bigger than the bar. However it will float over the content. Let me know if this is what you desire

    @media screen and (min-width: 1080px){ 

header.masthead-logo-in-menu#masthead .logo img{
    position:absolute !important;
     width:200px!important;
     height:200px!important;
     max-height: 200px !important;
     z-index:1;    
     left:-150px;   

}
}

    @Magus much appreciated :-)

  5. 9 years, 6 months ago roland

    Hi Addo, I just copy pasted the custom CSS you gave but nothing happen.

  6. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi :) What Addo is suggesting is the way to go. I’m not seeing that Custom CSS in your page. If you could put it back we’ll be able to investigate further.

    Thanks

    Thanks for the help Magus.

  7. 9 years, 6 months ago roland

    Hi Andrew, I copy again to custom CSS what addo did, and it work, i just tweak something on my logo to make it nice on the layout, its just when you check it and scroll down I noticed there is a logo behind my logo, can you kindly check it? :)

    thanks!

  8. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you made progress. Try the following under Appearance > Custom CSS:

    header#masthead nav:first-of-type .logo { display: none; }
  9. 9 years, 6 months ago roland

    looks great now, Thank you so much andrew! :)

  10. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear that helped.

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More