[Support request] Mobile logo in different position

Home Forums Support [Support request] Mobile logo in different position

Home Forums Support Mobile logo in different position

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1048866
    domedele

    Hi,
    i note that menu position is very problematic from desktop to mobile.
    I adjust a desktop menù on the left with logo.
    In mobile version i have now a logo on the left, title page on the center, menu sticky on the right.
    I want to change a position logo on mobile version: position center (resizing logo?) and sticky menu above on the center.
    How can I do it?

    #1048971
    Leo
    Staff
    Customer Support

    Hi there,

    Try this:

    .site-logo.mobile-header-logo {
        margin-left: auto;
    }
    @media (max-width: 800px) {
        #mobile-header:not(.navigation-stick) .menu-toggle {
            position: absolute;
            right: 0;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    As for increasing the logo size, try increasing the menu item height on mobile:
    https://docs.generatepress.com/article/menu-item-height-width/

    Let me know 🙂

    #1049432
    domedele

    it’s strange
    it partial work only if i add css in “add css” not in simply css plugin

    -the logo is not exactly centered
    -the menu sticky is not centered under the logo
    -in addition i want the menu sticky opened on the right
    thanks

    #1049852
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I just tried to check out your site but it doesn’t seem to be loading – can you make sure everything is live?

    Thanks!

    #1049868
    domedele

    Yes is online. I note that in Mobile the logo stay always on top also in scrolling page

    #1049874
    Leo
    Staff
    Customer Support
    #1049916
    domedele

    I cut and copy the this cose in css (in css simple plugin doesn’t work).
    Now I think is not very centered, the sticky menu isn’t under logo. And the logo remain visible in scrolling

    #1049928
    Leo
    Staff
    Customer Support

    This is the CSS I’m seeing in your Additional CSS field:
    https://www.screencast.com/t/qMegigrwQ

    And that’s not the same as my code here:
    https://generatepress.com/forums/topic/mobile-logo-in-different-position/#post-1048971

    Can you try copying and pasting my code?

    #1049983
    domedele

    Yes I try other variable because the CSS doesn’t work

    #1049986
    Leo
    Staff
    Customer Support

    My CSS should work – can you add it in again so I can see why it doesn’t work?

    position: above; isn’t a valid CSS:
    https://www.w3schools.com/cssref/pr_class_position.asp

    #1050013
    domedele

    Now seems centered.
    I don’t understand why the css code in simple css doesn’t work.
    Now I want to punt the sticky menu under the logo
    And adjust the title page padding. Is a functions of element?
    Thanks

    #1050019
    Leo
    Staff
    Customer Support

    SimpleCSS should definitely work – we use the plugin all the time.

    However, since you are already using the Additional CSS field, then it’s best to keep all the CSS there and avoid using the plugin.

    Now I want to punt the sticky menu under the logo
    And adjust the title page padding

    Not sure if I understand. So you want the logo and toggle to stack in the center in sticky mode?

    #1050051
    domedele

    yes i want logo in the center, under the sticky menu

    #1050056
    Leo
    Staff
    Customer Support

    Try the edited CSS here:
    https://generatepress.com/forums/topic/mobile-logo-in-different-position/#post-1048971

    And this:

    .main-navigation.has-sticky-branding.navigation-stick .inside-navigation {
        flex-direction: column-reverse;
    }
    .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
        padding-right: 0;
    }
    #1050839
    domedele

    Doesn’t work, Stick menu isn’t centered.
    But the title has a good padding!
    thanks

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