Collapsible Menu on Mobile, Full Menu on Desktop with Inline Centered Logo

[azwick2]

Hi Themeco Staff,

I am trying to achieve the following aesthetic. In Desktop mode I would like to have my logo centered with my menu links around my logo on either side of it. I was able to achieve this from this article (https://theme.co/apex/forums/topic/centering-the-navbar/), but on mobile it keeps the same formatting, which is not going to work.

I tried to remove the other links with this command:

@media screen and (max-width: 720px){
#site-navigation #menu-item-216{
display: none;
}
}

But that didn’t work. That wasn’t from Themeco, but maybe you have something similar. I just need the accordion menu to show on mobile and nothing other than my centered logo for the header.

www.trueco2.com

Thanks so much for your help!

Ari

[ruenel]

Hello There,

Thanks for posting in! Your code is incorrect. Please use this instead:

@media screen and (max-width: 720px){
  .x-navbar #menu-item-225{
    display: none;
  }
}

Hope this helps. Please let us know how it goes.

[azwick2]

Hi RueNel,

Thanks a lot, that works great! I just have a few more questions.

If I add another element, like the search bar, it translates the logo image over to the left. Is there a way I can anchor that element so that all the other menu items center around it?

There is also a gap on mobile between the top of the logo and the top of the bar, which is not present on Desktop mode. It looks like the accordion menu is taking up that space. How can I close that gap so that it’s flush with my logo on mobile?

Thanks a lot!

Ari

[nabeel]

Hi Ari,

Thanks for writing back! I tried checking your site but it’s not accessible currently. I’m getting 500 Internal Server Error, can you please check the site on your end?

Thanks!

[azwick2]

Hi Nabeel,

Yikes, I don’t know what’s causing that, I’ve been working on my site since I messaged and I haven’t seen any down time. Maybe it just timed out on your end for a minute?

[azwick2]

Maybe you could try: http://trueco2.com/shop-page/

[ruenel]

Hello There,

If you add another menu item, you’ll just have to make sure that the added menu item is only visible in smaller screens and that it will display on the right side of the logo.

To resolve the gap issue, please add this code:

@media(max-width: 979px){
    .x-navbar-inner {
        min-height: 160px;
    }
}

Hope this helps.

[azwick2]

Hi RueNel,

Thanks for your reply. I see that it did close the gap on the picture, but the accordion menu still has a line to its own that’s eating up a lot of useful space. Is there any way to get it on the same line as the logo?

I also noticed later that the menu logo is appearing in the accordion menu on mobile, how can I remove the logo from that menu?

Just so I understand correctly, it sounds like I can’t anchor the logo so that the other menu items don’t affect its position, is that correct?

Thanks!

Ari

[paul.r]

Hi Ari,

Please change the code provided by my colleague with this.

@media(max-width: 979px){
    .x-navbar-inner {
        min-height: 120px;
    }
    .x-btn-navbar, .x-btn-navbar.collapsed {
        z-index: 999999;
        position: relative;
    }

    body .x-nav-wrap.desktop {
        margin-top: -30px;
    }
}

Hope that helps.

[azwick2]

Hi paul.r,

Thanks so much, that fixed the issue. I was able to remove the menu item on mobile from the following page: https://theme.co/apex/forums/topic/different-menu-items-on-mobile-and-desktop/

I didn’t see an answer about centering the menu with my logo image anchored. Is that possible?

Ari

[christopher]

Hi there,

I am not sure exactly what is the request as I see the logo is on center and menus are on the left and right on your website.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.