How do I move some of my menu on computer only?

Hi stefanie,

This is quite easy to do as we may have to split the menu to 1 for top bar, another for the actual primary menu.

But the dilemma is, we have to keep the mobile primary menu the same way. This means we can't remove things from Primary menu in Appearance > Menus.

Here's the workaround I'd try:

I'll make a new menu and name it "Top Bar".

In this menu, I'll at the menu I want to move from the current primary menu which is "Home', "Our Mission" And "Newsletter".

You then add this menu to the top bar through the widget or PHP snippet if you're familiar with coding.

After adding, you'll see duplicate menu-items because we have "Home', "Our Mission" And "Newsletter" both on the top bar and the primary menu.

We hide the duplicate menu items (on desktop only) using CSS:

Example: hiding "Home', "Our Mission" And "Newsletter" on desktop using CSS:

@media(min-width:769px){
li#menu-item-11401 , li#menu-item-11407,li#menu-item-3529 {
    display: none;
}
}

Hi Elvin,

Thanks for your detailed response. I understand most of it, but no, I'm not familiar with coding or ho to do PHP snippet I'm afraid, so please can you clarify or help me on that part, otherwise I'm stuck. Thanks :-)

It's pretty complex so let's start with the easy ones first.

Can you start by making a new menu for the top bar?

Go to Appearance > Menus and create a new one containing all the links you want to play on the top bar.

After creating, you can insert it on the top bar by going to Appearance > Widgets. Click and drag "Navigation menu" like this - https://share.getcloudapp.com/JruDvRDE - then select the new top bar menu you just created.

After adding it in, you should see the menu on the top bar of your page. This means you'll have duplicate menu items.

That's where the CSS I've provided comes in.

@media(min-width:769px){
li#menu-item-11401 , li#menu-item-11407,li#menu-item-3529 {
    display: none;
}
}

It hides the duplicates on the primary menu.

Hi Elvin,

Ok, I have done exactly what you have said and followed your video. I now definitely have a top bar menu with my 3 menus in. However, it's not showing up on my site because I have social media icons in the way (they are on the left). I tried adding top bar menu above social media in the widget section to hopefully make that move over, but it hasn't worked. I would like the social icons to be on the right and the menus to be on the left if at all possible, but don't know how to do this. Please see what i mean... unless you can see the menu up there from your end and my cache just not clearing, but I don't think it's that.

zestforever.com

Thanks so much!

Hi Stefanie,

Try this CSS for the top bar layout :)

aside#nav_menu-2 a {
    color: #000000;
}
.inside-top-bar.grid-container.grid-parent {
    display: flex;
    align-items: center;
}
.inside-top-bar.grid-container.grid-parent .widget_lsi_widget {
    margin-left: auto;
}

Thanks Ying,

This worked really well! I'm always amazed by you guys haha :-)
Thank you

Hi Ying,

I just noticed I have a problem with my menu on mobile now. It all looks fine on laptop version, but on mobile it doesn't look right. The social icons have now been squashed to the right, and the menu is squashed on the left. I've tried making the letters bigger and smaller, but I can't get it right.
Please is it possible to have social icons along the very top, then menu underneath (but above the green). You'll see what I mean when you look. Just these changes on mobile is fine as it all looks ok on laptop.

Thank you so much ;)
zestforever.com

Glad to hear that, and you are welcome :)

Try this CSS:

@media (max-width: 768px) {
    .inside-top-bar.grid-container.grid-parent {
       flex-direction: column-reverse;
    }
}

Hi there,

I have added the new CSS which has worked really well and everything is looking good. Only problem I now have is that I have duplicate menus on my mobile version of website. I have added the additional CSS that is supposed to stop this from happening (you will find it on this feed at the top), but I don't think its worked. I still have duplicate menus on my mobile version of 'OUR MISSION', NEWSLETTER', and 'HOME'. These are supposed to be at the top, just need them removed from the drop down menu (on mobile only) if possible.

Hope this makes sense? Also, if you give me more CSS do I take the CSS out that hasn't worked like its supposed to?

Thanks so much for your help! :-)

Try this one to hide these 3 menu items on mobile :)

@media (max-width: 768px) {
    li#menu-item-3529, li#menu-item-11401,li#menu-item-11407 {
        display:none;
    }
}

Hi Ying,

Ok, thanks so much, that CSS has hidden those menus on mobile. However, weirdly, OUR MISSION, HOME and NEWSLETTER are now showing up on laptop where I don't want them to be. I want them up the very top, but they are now duplicated on the other menu too. I'm petty sure they weren't there like that before.

So sorry to be a pain, but can you help me get rid of them please? Mobile is all fine as it is.

Are there any issues with me adding all this additional CSS SEO wise I mean? Should I be deleting some of it as it becomes irrelevant o doesn't it matter.

Thanks
zestforever.com

When you say tablet, which device are you using?

The CSS is based on device screen width, for eg. Ipad is 768px, so the CSS works for it, 3 items won't show up in the main navigation. But if you are using a device like Ipad pro which is 1024px in width, the CSS won't apply.

You could try change the@media (max-width: 768px) to @media (max-width: 1100px), so the 3 items only show up in screen wider than 1100px.

Clearing unused CSS is a good habit :)

Hi Ying,

I'm sorry, I don't really understand what you just said as it's a bit technical for me I'm afraid. I'm on my laptop which is a very wide screen As you can see, the primary menu is cluttered and I have duplicate menus (one at the very top of the screen, and the same ones on the primary menu). I just really wanted the OUR MISSION, NEWSLETTER and HOME to stay at the very top, and the other 3 I WOULD LIKE TO LEARN ABOUT, MEAL PLANS, and FITNESS PROGRAMS only to be on the green bit under the zestforever - plant based word logo. Hope you can see what I mean. The weird thing is, you did give me some code before that cleared them, but since I have been adding other CSS since then, they have come back again.

Thanks

Sorry if I make you confused, could you try to replace this CSS:

@media (max-width: 768px) {
    li#menu-item-3529, li#menu-item-11401,li#menu-item-11407 {
        display:none;
    }
}

With this:

@media (max-width: 1100px) {
    li#menu-item-3529, li#menu-item-11401,li#menu-item-11407 {
        display:none;
    }
}

If the result is not what you are after, then could you tell me when do you want the HOME/OUR MISSION/NEWSLETTER to show in the primary navigation? A very wide screen? Or not at all?

Let me know :)