Mobile Nav bar to display sooner?

User 1222433 Photo


Registered User
40 posts

Hi there good people, I am trying to work out how to have the mobile nav bar display sooner when the screen is reduced, for example I currently have a normal nav bar but as the screen reduces in size I would like the mobile version to display sooner to keep things looking tidy, is there a way to do this or is it set ?
User 1222433 Photo


Registered User
40 posts

Please also note in case of confusion that the linked website in my signature is not the one as I have not long purchased Site Designer and am currently in the design phase of the operation lol
User 2699991 Photo


Registered User
3,707 posts
Online Now

Hello
It depends on which menu component you used and which framework you are using. Seems to me from the way you describe that you are working from desktop down rather than mobile first.

Most menus are set as for when they display or are hidden.

At what width does the menu currently change? and at what width do you want it to change.?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 1222433 Photo


Registered User
40 posts

Wayan Jaya wrote:
Hello
It depends on which menu component you used and which framework you are using. Seems to me from the way you describe that you are working from desktop down rather than mobile first.

Most menus are set as for when they display or are hidden.

At what width does the menu currently change? and at what width do you want it to change.?


Hi there I am using Foundation, the blue monster looking thing lol. And as u can see in the image as I reduce the screen size some of the nav bar text links are moving to the second row, it is here I wish it to begin the mobile nav instead of the default if that makes sense?
Attachments:
User 2699991 Photo


Registered User
3,707 posts
Online Now

So at that blue default breakpoint you need to select the container holding the mobile menu hamburger thingy and change its display property to

block instead of none.
And then select the container holding the menu items and change its display property to
none
from whatever property it has.
Then when you think it looks tidy (which I think looks tidy even with 2 rows) you add a breakpoint and then set the containers back to how they were


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,707 posts
Online Now

Alternatively
Let us know which menu component you are using and I could then do a little demo video showing the steps.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 1222433 Photo


Registered User
40 posts

Wayan Jaya wrote:
So at that blue default breakpoint you need to select the container holding the mobile menu hamburger thingy and change its display property to

block instead of none.
And then select the container holding the menu items and change its display property to
none
from whatever property it has.
Then when you think it looks tidy (which I think looks tidy even with 2 rows) you add a breakpoint and then set the containers back to how they were



Sounds very complicated for simple folk like me lol.... the menu component I am using is the one labelled MENU1 in this screen shot. Thanks for your help :)
Attachments:
User 2699991 Photo


Registered User
3,707 posts
Online Now

Phat Monkey wrote:
Wayan Jaya wrote:
So at that blue default breakpoint you need to select the container holding the mobile menu hamburger thingy and change its display property to

block instead of none.
And then select the container holding the menu items and change its display property to
none
from whatever property it has.
Then when you think it looks tidy (which I think looks tidy even with 2 rows) you add a breakpoint and then set the containers back to how they were



Sounds very complicated for simple folk like me lol.... the menu component I am using is the one labelled MENU1 in this screen shot. Thanks for your help :)


Yes it's a component made to work like its made, to change it from default to something else is supposed to be complicated

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,707 posts
Online Now

Wayan Jaya wrote:
Phat Monkey wrote:
Wayan Jaya wrote:
So at that blue default breakpoint you need to select the container holding the mobile menu hamburger thingy and change its display property to

block instead of none.
And then select the container holding the menu items and change its display property to
none
from whatever property it has.
Then when you think it looks tidy (which I think looks tidy even with 2 rows) you add a breakpoint and then set the containers back to how they were



Sounds very complicated for simple folk like me lol.... the menu component I am using is the one labelled MENU1 in this screen shot. Thanks for your help :)


Yes it's a component made to work like its made, to change it from default to something else is supposed to be complicated


sorry I can't help
I don't have that menu component (never seen any of them that you have in the navigation list)

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 1222433 Photo


Registered User
40 posts

Wayan Jaya wrote:
Phat Monkey wrote:
Wayan Jaya wrote:
So at that blue default breakpoint you need to select the container holding the mobile menu hamburger thingy and change its display property to

block instead of none.
And then select the container holding the menu items and change its display property to
none
from whatever property it has.
Then when you think it looks tidy (which I think looks tidy even with 2 rows) you add a breakpoint and then set the containers back to how they were



Sounds very complicated for simple folk like me lol.... the menu component I am using is the one labelled MENU1 in this screen shot. Thanks for your help :)


Yes it's a component made to work like its made, to change it from default to something else is supposed to be complicated


Ah right, I should have thought it out better before using it, so used to using Xara Designer Pro X, much simpler app, but I decided to dump it for Site Designer as the updates vs update plan was very lacking and not worth upgrading any further (after 3 years of upgrades). I will bunker down and try to figure this Site Designer out lol

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.