This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Logo Navigation Bar

Resolved 10 replies premiumthemetheme-vantage
roland
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Magus Staff 10 years, 11 months ago

    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. roland 10 years, 11 months ago

    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. Magus Staff 10 years, 11 months ago

    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. Daniel Staff 10 years, 11 months ago

    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. roland 10 years, 11 months ago

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

  6. Andrew Misplon Staff 10 years, 11 months ago

    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. roland 10 years, 11 months ago

    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. Andrew Misplon Staff 10 years, 11 months ago

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

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

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

  10. Andrew Misplon Staff 10 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread