Logo overlap header

[gallagherBD]

Hello, I wanted to have the logo overlap the header. I found a support topic that helped me to achieve this by adding the following custom css:
.x-navbar .x-brand { position: fixed;}
.x-navbar-inner {max-height: 90px; overflow: auto;}

The only issue I have is when you go into responsive mode, that logo stays at the top of the screen even though the header does not. Here is a link to the dev site: http://sjclaims.gallagherbd.com/.

Please let me know if you have a snippit of Custom CSS that can fix the problem.

[nico]

Hi @gallagherBD,

Thanks for writing in.

In mobile view, how do you want it to look? or what you want to achieve when you someone will view in mobile?

You could adjust the logo when viewing in mobile view by adding a CSS.

Share us more details so we could suggest the best CSS that you need.

Thanks.

[gallagherBD]

In mobile view, the header stays fixed at the top. I want the logo to stay at the top with the header when scrolling in mobile view.

[gallagherBD]

One more thing… when I added the code to overlap the header, the subheader is now contained in the header. So if you hover over a menu item the submenu is cutoff. In responsive mode the menu is cutoff as well.

[ruenel]

Hello There,

Do you want something like this?

Please have your code updated and use this:

.x-navbar .x-brand {	position: fixed;}
.x-navbar-inner {max-height: 90px;}

@media (max-width: 979px){
  .x-navbar-fixed-top{
    position: fixed;
  }
}

We would loved to know if this has work for you. Thank you.

[gallagherBD]

Thanks! This did the trick!

[nabeel]

Glad we could help.

Cheers!