[Support request] How can we center logo with navigation divided on both sides?

Home Forums Support [Support request] How can we center logo with navigation divided on both sides?

Home Forums Support How can we center logo with navigation divided on both sides?

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #674990
    Amit

    Hi,
    I am interested in centering the logo of my site something like roastycoffee.com with navigation divided on both sides. Also, what should be the optimal size of image to keep here as I want to have sticky navigation.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #675162
    David
    Staff
    Customer Support

    Hi there,

    so this is the simplest method for adding logo in center of navigation:

    https://docs.generatepress.com/article/centering-logo-navigation/

    For the logo size, i always work on the basis of the menu item line-height. Roastycoffee for example us 150px x 42px

    #677020
    Amit

    Things worked but the logo is gone when viewed on mobile. And when I clicked on some menu option on mobile, the nav bar changes to orange color.

    #677035
    David
    Staff
    Customer Support

    Ok looking good. So do you want the logo above the Navigation on mobile?
    For the color fix are you able to flush the autopotimize cache and disable it.

    #677079
    Amit

    I want the logo between the Menu button and the search icon, not above that as the area after the button is empty. I am able to empty the cache but won’t be able to disable it.

    #677085
    David
    Staff
    Customer Support

    for the Mobile logo, activate the Mobile Header in Customiser > Layout > Header. And add the logo there. We can then use some CSS to re-order the elements.

    Whilst the cache is on i cannot see where the CSS effecting the mobile hover styling is coming from. Try the mobile header first and lets see.

    #677088
    Amit

    Ok, let me switch off the cache for some time….check now…

    #677090
    Amit

    The logo is also coming weird in mobile. It’s coming at top of the menu and search button..

    #677133
    Amit

    I want something like this but on mobile
    https://www.nataliabasdeki.com/

    #677363
    Leo
    Staff
    Customer Support

    I can’t quite tell because you have caching plugin on but looks like you have this CSS added?

    .mobile-header-navigation .mobile-header-logo img {
        height: 80px;
    }

    This article should help to center mobile header logo:
    https://docs.generatepress.com/article/centering-logo-mobile-header/

    #677599
    Amit

    I am unable to figure out as from where that CSS is coming up as there is nothing like this in the additional css as well as in the child css. Before this step of positioning the logo at the center of navigation, everything was fine and the logo was displayed in line between Meny and Search button.
    Please help me out and if you need to login to check, I can provide credentials!

    #677685
    David
    Staff
    Customer Support

    Hi there,

    can you switch off autoptimize? Whilst it is on its really hard to diagnose the issue, it may even be the cause of the problem when it combines and minifies the CSS.

    #677707
    Amit

    Please check, I have disabled both Wp Super Cache as well as Autopitimze…

    #677709
    Amit

    If I am enabling the mobile Header, the Logo vanishes and there is no name of site anywhere, whereas, If I disable mobile header, the logo comes in But it’s a line above the Menu and Search button. I want the logo to be displayed between the Menu button and Search icon.

    #677715
    David
    Staff
    Customer Support

    OK so looks like the hover color bug has gone. So sounds like a caching issue.
    So next – where you enabled the mobile header you can add a logo to it. Do that and then i can provide the CSS to get it aligned how you need.

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