[Resolved] Off canvas panel icon invisible from 501 to 768

Home Forums Support Off canvas panel icon invisible from 501 to 768

  • This topic has 19 replies, 4 voices, and was last updated 4 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1451686
    Anil

    Hi

    Off canvas panel icon remains invisible from 501 to 768px screen size…

    Please advise…

    #1451836
    David
    Staff
    Customer Support

    Hi there,

    instead of setting the Off Canvas to Display on Mobile and Destkop. Set it to Mobile only.
    Then in Customizer > Layout > Primary Navigation – increase the Mobile Menu Breakpoint to a really hight value – eg. enter 6000px.

    #1451984
    Anil

    David, it works, but navigation-branding is loosing left margin…. logo is sticked to left margin of screen….

    #1451993
    David
    Staff
    Customer Support

    Try this CSS to add back a little padding when the screen is 1200px wide or less:

    @media(max-width: 1200px) {
        .main-navigation.has-branding .inside-navigation.grid-container {
            padding: 0 10px !important;
        }
    }
    #1452015
    Anil

    Above code not working.

    I tried below one, is this correct….

    .main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding {
        margin-left: 20px;
    }
    
    #1452252
    David
    Staff
    Customer Support

    Weird – that CSS i provided should work.
    Does yours? If so it looks fine to me

    #1452275
    Anil

    Weird – that CSS i provided should work.

    No, it was not working.

    I had to have couple of css for managing it…

    I believe, you need to update navigation-branding-flex.css…

    #1452948
    Tom
    Lead Developer
    Lead Developer

    Try the latest 1.12.0-beta.2 version 🙂

    #1453407
    Anil

    Dear Tom, I removed the added css, and this beta.2 resolves the issue.

    One more issue, I would like to highlight .navigation-branding margin-left which is hard-coded 10px, it is not coming nice when you apply padding of 20px in content.

    I had to use following css to overwrite

    .navigation-branding {
        margin-left: 20px;
    }
    

    Please check…

    #1454136
    Tom
    Lead Developer
    Lead Developer

    Have you tried changing the Container alignment to “Text” in Customize > Layout > Container?

    #1455921
    Anil

    Hi Tom

    Using
    GPP 1.12 rc1
    GP 3 beta 2

    Removed inserted css in simple css.

    Please check left alignment of logo is NEITHER aligned with box NOR aligned with text in both ways as per customiser – Container alignment to “Text” OR “Box”…..

    #1455933
    Leo
    Staff
    Customer Support

    I think the issue here is that you’ve changed the mobile navigation breakpoint to 6000px so you are actually seeing the mobile header layout on desktop.

    The margin-left: 10px CSS is added to the mobile navigation branding so the logo doesn’t position right against the edge of the mobile screen.

    So in this case we can try some CSS like this to tweak it:

    @media (min-width: 1220px) {
        .navigation-branding {
            margin-left: 0 !important;
        }
    }

    Let me know if this helps 🙂

    #1455958
    Anil

    The margin-left: 10px CSS is added to the mobile navigation branding so the logo doesn’t position right against the edge of the mobile screen.

    I am saying it should not be hard-coded…

    #1455975
    Leo
    Staff
    Customer Support

    Hmm I would say that most users don’t want their logos to sit right against the edge of the screen on mobile.

    So if we don’t add that CSS in, we would end up having to provide that CSS to all the users who want that.

    Let me know if this makes sense 🙂

    #1455979
    Anil

    it should be based on some logic to have value from customiser – padding / user input / or something…. think of it…

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