How to Enlarge Logo (Out of Container) on Navigation Pro?

[Regev]

My logo appears way too small on Navigation Pro. I want it to appear bigger, out of the header container, and possibly even center it like here:

https://ibb.co/zNcYBqG

(with the menu items organize themselves symmetrically around the logo, like in other Genesis themes)

Any idea what I should add to the functions.php/css files to accomplish that?

Thanks a lot in advance.

https://grizzly.co.il

[William]

Hello Regev,

It's certainly possible, but you'll need to fiddle with your theme's CSS 🙂 No need to edit the functions.php file, just the styles.css.

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[Regev]

Any idea what I should put in the stylesheet?

[andytc]

It can be done , but it will affect many things , especially when you get down to mobile sizes , sure , you can make media quries , but it might be quite a few entries. Remember also the size of your main menu on the right, that might change over time and get longer and get hidden behind the logo. Also, the header is 'sticky' on scroll , so consider how it would look on interior pages with content. Lots to consider and many possible changes to make.

You can try this CSS to get started and see if it's going to work for you. Adjust as neccesary.

.site-header .custom-logo-link .custom-logo {
  max-height: 160px;
  width: auto;
  position: absolute;
  left: 50%;
  margin-left: -120px;
  top: 70%;
}

I've included this media query to switch it back on mobile , but check tablets on this

@media only screen and (max-width: 1023px) {

  .site-header .custom-logo-link .custom-logo {
    display: block;
    max-height: 80px;
    position: relative;
    margin:0;
    left: 0;
    top: 0;
  }

}

It's just something to give you something to look at , lots to be done and checked , especially mobile views , tablets etc.

[Regev]

Thank you so much!!! I tweaked it a bit and ended up with this:

Homepage

Will continue playing with it to make it nice for mobile/tablets.
Thanks again <3

[Author]

Posts