How to put the logo in the center of other items in the navigation bar

Home Forums Mustang How to put the logo in the center of other items in the navigation bar

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #17153

    Lana
    Participant

    How to put the logo in the center of other items in the navigation bar

    Resolved

    Hello,

    I’m trying to place the logo of the website between menu items like this:

    item1 item2 item3 LOGO item4 item5 item6

    It was suggested on stackexchange that “the simplest option is to just create two menus left and right and then add an image in between”.
    https://wordpress.stackexchange.com/questions/148956/how-to-put-the-logo-in-the-center-of-other-items-in-the-navigation-bar

    Unfortunately, I don’t know where to start to implement something like that. So, I’ve uploaded Nav Menu Images
    By Milan Dinic and it seems to be working fine. I added the menu item in customizer and uploaded my logo as the item. After, I set these style:

    .logo .type-img {
        display: none;
    }
    
    .logo img,
    .logo .text-logo,
    .logo .description {
        display: none;
    }

    to get rid of the logo that is on the left by default. This also worked, but I still have the space that is supposed to be used by logo. So, my navigation which I would like to be in the center is actually is a bit on the right side. Could you please help me figure how to fix that?

    I look forward to receiving your reply!

    Thanks,
    Lana

    • This topic was modified 8 months ago by  Oliver Juhas. Reason: Formatting code
    #17156

    Oliver Juhas
    Keymaster

    Hi Lana,

    I’m sorry but the theme does not provide such header layout. I don’t like that layout as it creates confusing and not very accessible HTML, mixing different elements together and splitting website navigation, which is not very good approach.

    Also, please understand this implementation is considered as theme modification (and quite a big one) and I do not provide support for those – please read terms of service.

    If you are not familiar with coding and still want that header layout I suggest you hire a developer to do that for you. You can try https://studio.envato.com or https://jobs.wordpress.net or similar websites.

    To get rid of the default theme header logo you can simply use this custom CSS (instead of yours – maybe try to use your browser’s code inspector to determine the CSS you need to use):

    .logo,
    h1.logo {
      display: none;
    }

    Please note that you will also need to test your modifications on mobile devices as I believe there will be a display problem there due to this particular logo/navigation layout.

    Best regards,

    Oliver Juhas
    WebMan Design

    #17325

    Lana
    Participant

    Thank you!

    All the best,
    Lana

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.