Mobile navigation, seperate headers?

Support
#1

I’m having a super hard time with structuring my header for mobile. I’ve read the doc on building it, but I still find it quite confusing.

I am pretty happy generally with my desktop header, but the mobile is another story.

Is it possible to create two separate headers? one for anything ipad portrait and lower, and one for anything larger?

I’d like to structure it like this site’s mobile header: https://www.acupuncturecoaching.com/
With the logo on the left and the mobile toggle to the right. I don’t need the social icons.

Thank you :slight_smile:

#2

Hello,

It could be possible with custom development. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

#3

hmmm… I guess i don’t really need a second header, but i’m having a really tough time sorting out how to structure the mobile version of mine. I read the documentation but it still is pretty confusing. Can you give me some advice on how to accomplish what i mentioned above?

I basically just want:

  • the mobile button to the right of the logo
  • to hide the tagline (to the right of the logo on desktop) and “member” button (which I can do through css no problem unless there is a better way
  • have the mobile menu drop below the header (like the example I gave rather then it sliding out of the side like it is currently)
  • and lastly, assign a different menu to mobile header (it’s not using the same as my desktop currently anyways, just need to know where to assign it.)

Thank you. It would be great if there were a couple videos showing some basic mobile layouts like this.

#4

Hi There,

Sorry for the confusion.

On PRO the mobile responsiveness is not automatic, you need to hide or show elements based on screen size.

Every Bar, Container or Element has a tab CUSTOMIZE, when clicking on this bar you are able to hide the elements based on the screen size in order to fit the elements to each screen width.

You can choose to hide the whole bar for mobile and create a new bar specific for mobile, or hide the elements accordingly.

On the header builder on the very left, you have a picture of a mobile which dropdowns on top many screen widths to be selected so you can preview your work and work on different screen sizes.

Hope it clarifies.

#5

ok. i understand how to hide elements, it’s how to restructure the accordion menu that I don’t understand and would like some guidence on.
How do I move the mobile menu button to the right of the logo like in the example I showed and have the navigation drop directly below (rather then slide from the side as it is by default).

If you can show me some examples or tutorials that will help. I just can’t find much out there on how to structure the mobile navigation.

#6

Hi There

Please use the Navigation Modal Element instead for your mobile menu.

Hope it helps

#7

Ok perfect, that’s what I was looking for.

One issue i’m having that seams a bit glitchy/off.

I first added my model to the wrong container. I tried to drag it into the other container. When i look i can see the model element in the new container (and also a copy in the old container - not sure if dragging and dropping is suppose to duplicate or move?)

When i try to view or edit the settings for the model element I added to the new container, nothing happens. The same happens with the original copy in the first container. If I save my header, the duplicate in the new container disappears.

The other strange thing is that although I enabled the Sub Indicator Setup controls to on, my child menu items are not showing (and yes I do have children assigned in the menu for the model). I checked in firebug also and the children are not being outputted.

Any ideas?

Thank you

***********Update:
I found a work around where I just duplicated the original container, so I now have my button where I want it. Still strange it wouldn’t allow me to move it to another container though.

I still have the issues with the sub indicator setup and having the child nav elements show. Last time I tried to get in there, I got a few blank areas in the setup screen (see here: http://imgur.com/a/nJZZY)

#8

Hey there,

You’ve not updated the Pro to the latest version, please update it to the latest version first and see if this resolves the issue.

Do update us how it goes!

#9

I have auto updates on, but not sure why it isn’t updating on it’s own? It shows it’s unlocked and my license is valid. When i click the check button it says “nothing to report” but still seams i’m one version behind. I can do a manual replace of the files but i’d rather the auto update work. Any ideas there? See here: http://imgur.com/a/GTJN9

#10

Hi there,

I went to your website backend and clicked on the update button:

And if you scroll down you will see the automatic download available for you:

Hope it helps.