Open old issue

[Rob_Strickland]

Hello,
I’d like to follow up on this thread: https://theme.co/apex/forum/t/overlap-header-logo-resize-on-scroll/2303/5

The issue of the overlapping logo on secondary pages still covers/hides the breadcrumbs and other elements such as page titles if there is no header image.

What code do I add to only overlap on the home page, and then show the smaller logo on all secondary pages?

Thank you in advance for your assistance!
Regards,
rob

[ruenel]

Hello Rob,

To resolve your issue, please update your custom css and use this instead:

@media(min-width: 980px){
    .home  .x-brand {
        font-size: 40px;
    }

    .home  .x-navbar .x-brand img {
        position: absolute;
        transition: height 0.35s ease;
    }

    .home.x-navbar.x-navbar-fixed-top .x-brand img {
        position: relative;
        width: auto;
        max-height: 150px;
        transition: height 0.35s ease;
    }

    .home .x-navbar {
      background-color:#f2c21e ;
    }
 }

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

[Rob_Strickland]

Thanks for your reply and suggestion. I replaced
@media(min-width: 980px){
.home .x-brand {
font-size: 40px;
}
with @media(min-width: 980px){
.home .x-brand {
font-size: 40px;
}

.home  .x-navbar .x-brand img {
    position: absolute;
    transition: height 0.35s ease;
}

.home.x-navbar.x-navbar-fixed-top .x-brand img {
    position: relative;
    width: auto;
    max-height: 150px;
    transition: height 0.35s ease;
}

.home .x-navbar {
  background-color:#f2c21e ;
}

}

But I do not see the issue resolved.

You can please use these links as examples:
http://ovpp.robstrickland.net/hello-world/
http://ovpp.robstrickland.net/event/polyrhythmics/

Kind regards,
Rob Strickland

[jade]

Hi Rob,

Please try to update the code to:

@media(min-width: 980px){
    .home  .x-brand {
        font-size: 40px;
    }

    .home  .x-navbar .x-brand img {
        position: absolute;
        transition: height 0.35s ease;
    }

    .home.x-navbar.x-navbar-fixed-top .x-brand img {
        position: relative;
        width: auto;
        max-height: 150px;
        transition: height 0.35s ease;
    }

    .home .x-navbar {
      background-color:#f2c21e ;
    }

    .single .x-navbar .x-brand img {
        position: relative;
        width: 80px;
    }
 }

Hope this helps.

[Rob_Strickland]

well… that is getting a bit closer to the desired effect. Thank you!

perhaps what I am after is too big of a request. How would I move the breadcrumbs to the right margin? And add a little padding on the .single posts so the bread crumbs are not hidden partially behind the Navbar?

Thank you!
Rob

[Rob_Strickland]

And on more request… based upon the original code… on tablets and Mobile devices The logo is large and doesn’t overlap the header image. How do i make the logo work the same as desktop?
Thanks!
Rob
P.S. The screens hot is of how it currently displays the logo:
https://screencast.com/t/QM557SFb09IX

[paul.r]

Hi Rob,

I can no see the breadcrumbs, please enable it again.

With regards to your logo, add this code in Custom CSS

@media (max-width: 979px) {
.x-brand.img {
     position:absolute;
}
}

Hope that helps

[Rob_Strickland]

Thanks for the good code to have the same overlap on other devices, it works great.
The bread crumbs and page titles are enabled. perhaps the best page to view and see how the overlaid logo doesn’t work so great on secondary pages like blogs and events would be one of these links.

http://ovpp.robstrickland.net/event/historic-pub-crawl-2/
http://ovpp.robstrickland.net/hello-world/
http://ovpp.robstrickland.net/1547-skiable-acres/

Otherwise If I can control page height by adding header images etc I can “fix” the display issue such as here, by adding padding above the left aligned titles, but the breadcrumbs are still hidden behind the logo:
http://ovpp.robstrickland.net/transit/
http://ovpp.robstrickland.net/area-maps/

Thank you for your help with this… this service is truly a huge part of why I love the X theme!!
Regards,
Rob

[rad]

Hi there,

Please add this CSS too

@media ( min-width: 980px ) {
.x-breadcrumbs {
    padding-left: 170px;
}
}

Hope this helps.

[Rob_Strickland]

Yes, thank you! This works quite well on most pages, however not on the event detail pages (http://ovpp.robstrickland.net/event/cocktails-canvases/).
What is the difference?
Regards,
Rob

[christopher]

Hi there,

On the page you have given the link the breadcrumbs does not render and items. It sits correctly but it shows nothing. It seems that The Tribe Events plugin does not generate anything for breadcrumbs to show.

Anyway, I suggest that you hide the breadcrumbs section for the single pages of the events. To do so add the CSS code below:

.single-tribe_events .x-breadcrumb-wrap {
    display: none;
}

Thank you.

[Rob_Strickland]

Thanks for your reply! I really appreciate your continued assistance here!!
I’m looking at how the logo works on mobile.
When the hamburger menu is displayed the logo is behind making the menu difficult to read (screenshot) and it hides the breadcrumbs (screenshot) too. Neither of which is desirable.
Is there a way to show the small logo on mobile and never the large logo? (Screenshot)
Thanks!

[Jack]

Hiya Rob,

You could replace the logo on smaller screen sizes or implement media queries. If you went the replacement route, you can use this JS to change the logo.

(function($) {
  if ($(window).width() < 480) {
    $(".x-brand img").attr("src", "your-image-link")
  }
})(jQuery);```

Just change the width and logo link to what you need. :slight_smile:

Thanks!

[Rob_Strickland]

Thanks, since the absolute logo was effecting the mobile nav and the breadcrumbs I removed the css that was allowing the logo to extend beyond the navbar, then replaced the logo with the JS you provided but I am unsure if it’s a page caching issue or something else that is causing the original (circular) logo to appear on some mobile pages and not others?
Do you know?

Thanks again for all the help. Once all this is sorted out it will likely be a standard design feature!
Regards,
Rob

Could you please open this ticket again? I think there are a few display issues… like the logo is missing on the home page, and the navbar isn’t sticky on mobile devices… http://ovpp.robstrickland.net/

[Joao]

Hi Rob,

This could affect every page.

Please clean your browser cache. If the issue persists, can you provide the specific pages where you are facing the issue so we can take a closer look?

Thank you!