[Support request] Center Menu Mobile Flexbox

Home Forums Support [Support request] Center Menu Mobile Flexbox

Home Forums Support Center Menu Mobile Flexbox

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1548860
    Kevin

    I moved my site from Float to Flexbox using the sider template that has been modified a lot.

    This caused many things to change their position. I am not managing to centralize neither the Logo nor the Mobile Menu. (I managed to center only the widgets and the search bar a little).

    On the mobile, the icon along with the word Menu is shown on the right instead of the center. If you change the setting above the header the menu will be fixed, but then on the desktop the sidebar will be without the menu (it will be on top), and possibly without the logo.

    How do I place the mobile menu icon and word in the center and make the logo appear below it centered instead of the side? Go to skdesu.com to get an idea of what I’m talking about.

    #1549282
    David
    Staff
    Customer Support

    Hi there,

    can you disable your cache plugin so i can take a closer look?

    #1549501
    Kevin

    Try on the kevinbk.com website, I disabled that cache, use the same theme with the same settings. Only the logo that is smaller.

    #1550200
    Leo
    Staff
    Customer Support

    Just visited this site kevinbk.com and the code is still cached.

    Can you actually disable the caching plugin?

    Thanks 🙂

    #1550249
    Kevin

    I’m sorry, someone was activating Wp-Rocket for me. It is now disabled.

    #1550350
    Leo
    Staff
    Customer Support

    Try adding this CSS:

    .mobile-menu-control-wrapper {
        margin-right: auto;
    }
    #1550446
    Kevin

    Amazing how a simple code can do this … And I get beaten up with a browser inspector … lol Also, I don’t know CSS … But what about the logo? How to centralize it? Is it possible to place it below the menu icon?

    #1550726
    Leo
    Staff
    Customer Support

    I don’t see a logo currently. Looks like it’s hidden with this CSS?

    @media (max-width: 900px) {
        html:not(.mobile-menu-open) .site-logo {
            display: none;
        }
    }
    #1550732
    Kevin

    The logo only appears on the desktop screen or when you open the menu on the mobile. When the menu is visible, the logo does not appear.When the menu appears at the top visible without the sidebar, the logo does not appear. Only when entering a small screen menu that needs to be opened (appears inside it when opening).

    #1551001
    Leo
    Staff
    Customer Support

    Give this CSS a shot:

    @media (max-width: 768px) {
        .site-logo {
            position: absolute;
            top: 38px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.