Make vertical mobile menu default - no toggle

Support
#1

I have purchased pro as suggested - now how do i get all 8 menu elements in a vertical column all the time - no hamburger toggle?

#2

Hello Don,

You can make sure of the Navigation Inline element then edit its settings and set the flex option to column.

January_Challenge_-Headers-_Pro
January_Challenge_-Headers-_Pro900×744 48.6 KB

Hope this helps.

#3

I don’t mean to seem ungrateful, but it appears that numerous steps leading to here have been left out. Can you please be more specific step by step? Thank you

#4

Hello Don,

Have you created a custom header already? You can do that in Pro > Headers. Keep in mind that the navigation inline and navigation dropdown element is best to used for desktop screen sizes. To have a vertical menu, the Navigation Collapse and Navigation Layered element is highly recommended.

To be more familiar with the Custom Header Builder, please check out this youtube tutorials:

Best Regards.

#5

Dear Jade/Ruenel – I think you are trying to be helpful here, but please keep in mind that I do not have one tenth the programming abilities that you possess. Going back to my ORIGINAL question, I simply need 8 menu items stacked on top of each other – but ONLY in the mobile display of the menu… Everything else you are proposing is USELESS!! I have tried doing as you suggest but after the tenth try STILL cannot come anywhere near my objective, Please provide steps that will solve my problem.

#6

Hello Don,

Where you want to add the menu, in your header or as part of your section? To better assist you with your issue, kindly provide us access to your site so that we can check your settings and create an example for you. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#7

Hey there - sorry for the delay - I’ve been ill.

#8

So here’s what the client wants - to have every menu item on hi website visible 24/7 - no hamburger - all the items stacked on each other - just as they are when them hamburger transitions back and forth. So here’s my secure info so you can get into the site - but now I am unclear how and when to mark it secure.

#9

Hello Don,

Do you mean that the mobile menu will display in mobile like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.masthead-stacked .x-btn-navbar {
    display: none;
}

.masthead-stacked .x-nav-wrap.mobile {
    display: block !important;
}

We would love to know if this has worked for you. Thank you.

#10

A partial victory. Mobile looks great. Unfortunately now the homepage is locked up with stacked menu now… Not good.

#11

Hey Don,

Sorry, there was missing in the code since it will be applied to the mobile site only.Please have it updated to this code instead:

@media(max-width: 979px){
  .masthead-stacked .x-btn-navbar {
    display: none;
  }

  .masthead-stacked .x-nav-wrap.mobile {
    display: block !important;  
  }
}

Please let us know if this works out for you.

#12

Excellent! Well done, Thanks, Can I now get a refund on Pro since unneeded?

#13

Hey Don,

I’m sorry but we could not provide a refund because as I’ve explained in your other thread, what you need is not possible with X but possible with Pro. You can continue to use the custom code provided but that should only serve as a guide. That means that if in the future, your client wants changes in the header, you would need to learn CSS to tweak the code we’ve given because we will not fix or enhance it.

I’d just add here the official solution in continuation to what Jade suggested.

  1. You need to create a Pro Header. Jade provided this link https://theme.co/docs/header-footer-overview. That’s the Header and Footer introduction.
  2. Once you’ve created a header, you need to add an Image element for your logo and a Navigation Inline element for your menu.
  3. The Navigation Inline element is horizontal by default and there’s no option to make it vertical per screen size currently. But, what we can do for now is we can hide the whole bar on mobile screens using the Hide During Breakpoints feature. Before hiding the bar though, duplicate it first. You can use the Context Menu for that.
  4. Now that we have the bar duplicated and the original hidden on mobile screens, the copy which is for the mobile screens should be hidden on desktop and laptop screens. The alignments should then be set differently for the mobile bar.

Below is a screencast showing the whole process and the settings that needs to be set. Just slow the playback down if it’s hard to follow along.

I know that requires work on your end but the result of that is you’ll get accustomed to using the Header and Footer builders and eventually know how to use them.

Thank you for understanding.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.