Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1236537

    Can I have the breadcrumbs bar stick to the main header bar? And can I make the height dimension smaller?

    #1236811

    Hey Kaleidoscope_Advertising_and_Design_Inc,

    I’m not sure if that would be possible, but send us a link to where we can see the element in question and we’ll have a closer look at it.

    Best regards,
    Rikard

    #1241328

    Hi Rikard,

    See the page at this link: < https://hunter-cpa.ca/services/ >

    #1241371

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    Please add this CSS code in Quick CSS, located in Enfold > General Styling:

    #top #main {
        position: relative;
    }
    
    #top #main .stretch_full.title_container {
        position: fixed;
        top: 147px;
        width: 100%;
        z-index: 320;
    }

    Best regards,
    Nikko

    #1242553

    Thank you! That’s worked! Beautiful!

    #1242571

    Hold that thought!

    When i placed the code into the Theme I adjusted the “top” setting so that the breadcrumbs bar “sticks” to the the bottom edge of the ‘masthead’ bar (with the logo on the left). However, with that setting, the breadcrumbs bar floats well below the same ‘masthead’ on the tablet…

    Suggestions?

    #1242572

    Same problem is on the i-phone

    #1242706

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    You can change the top values for different devices:
    Ipad Landscape Mode (add this):

    @media only screen and (max-width:1024px) {
      #top #main .stretch_full.title_container {
        top: 147px;
      }
    }

    Ipad Portrait Mode (add this):

    @media only screen and (max-width:959px) {
      #top #main .stretch_full.title_container {
        top: 122px;
      }
    }

    Mobile Device (add this):

    @media only screen and (max-width:767px) {
      #top #main .stretch_full.title_container {
        top: 142px;
      }
    }

    Best regards,
    Nikko

    • This reply was modified 4 years, 9 months ago by Nikko.
    #1242872

    Thank you for this.

    I noticed that iPad landscape and portrait codes are the same. Is this correct or should there be a different value for one of them?

    #1242923

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    I apologize for that, this is the right one for iPad portrait mode:

    @media only screen and (max-width:959px) {
      #top #main .stretch_full.title_container {
        top: 122px;
      }
    }

    Best regards,
    Nikko

    • This reply was modified 4 years, 9 months ago by Nikko.
    #1243159

    Hi,

    Thank you for the code.

    However I’ve changed the value of < top: XXXpx; > in all three instances but the “breadcrumbs bar” still floats below the header bar instead of “attached to it”. The “breadcrumbs bar” did not change position in the iPad or iPhone when I changed the values.

    A note on the mobile phone specifically:
    Actually, on the mobile phone the header bar does not “stick” to the top of the screen anyway. It it goes out of sight as the user scrolls up. Too what is needed to fix the breadcrumbs bar to the masthead on mobile phones?

    #1243200

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    I apologize again, I haven’t added the selectors (I have fixed the code above) but I’ll rewrite it again (remove the media queries I gave last time) and use this one instead:

    @media only screen and (max-width:1024px) {
      #top #main .stretch_full.title_container {
        top: 147px;
      }
    }

    Ipad Portrait Mode (add this):

    @media only screen and (max-width:959px) {
      #top #main .stretch_full.title_container {
        top: 122px;
      }
    }

    Mobile Device (add this):

    @media only screen and (max-width:767px) {
      #top #main .stretch_full.title_container {
        top: 142px;
      }
    }

    Best regards,
    Nikko

    #1243412

    Hi Nikko,

    Thank you for this: it’s getting better.

    For the I-Pad
    Landscape — works
    Portrait — the breadcrumbs bar floats under the Header bar. It doesn’t change position when I adjust the “top” value.
    Also: It does look like it will “stick” to the correct position at the top of the screen when scrolling, but the masthead slips away. Is there something needed for the masthead in portrait mode?

    For the mobile phone
    Landscape & Portrait
    The breadcrumbs bar can be made to sit in the correct position, but does not stick to the Masthead.
    – I’ve an idea here: If the masthead in the mobile phone env can’t be made to stick to the top of the screen can the breadcrumbs bar be made to stick to the top of the screen?

    #1243855

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    I have checked your site and I don’t see any changes.
    Since the breadcrumbs bar as you mentioned floats, it should also change location when you change the top value, the issue most likely is due to caching.
    Please try to flush out the cache.

    Best regards,
    Nikko

    #1245438

    I took the code out when we launched last week. I’ll try the code again and clear the cache.

    #1245624

    Hi Kaleidoscope_Advertising_and_Design_Inc,

    Thanks, just let us know it goes.

    Best regards,
    Nikko

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.