Change when navagation bars disappear...

User 2078068 Photo


Registered User
14 posts

As my page width decreases my navigation buttons start to wrap. Then after about 3 wrap, the buttons disappear and only the hamburger menu is shown.
How do I change when the buttons disappear?
I would prefer that it does not wrap at all and just disappears.
I'm guessing this has to do with a setting (wrap vs block) in my Layout? I've tried different things and can't get it.
Thanks,
Bob
Attachments:
User 2699991 Photo


Registered User
3,124 posts
Online Now

Robert Wilson wrote:
As my page width decreases my navigation buttons start to wrap. Then after about 3 wrap, the buttons disappear and only the hamburger menu is shown.
How do I change when the buttons disappear?
I would prefer that it does not wrap at all and just disappears.
I'm guessing this has to do with a setting (wrap vs block) in my Layout? I've tried different things and can't get it.
Thanks,
Bob

Hello Robert
The problem is that there are a couple of ways to do that, but it depends on which menu component you used,

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


Registered User
14 posts

I appreciate it. I have attached a picture of the Element Tree for this portion of the page. Maybe this will show you what you need.
Thanks,
Bob
Attachments:
User 2699991 Photo


Registered User
3,124 posts
Online Now

Just as a starter for 10 try this
open the project file, save it as a back ip copy

where you wish the menu bar to disappear then select the container (or whatever it is with the menu items within

move on down to the
Layout section "Display"
change the display = "flex" from row = no wrap to column = "no wrap"

slide on over to the tab "More"
open the drop menu and choose "none"

Select the container or whatever holding the hamburger thingy
in the same place change that container to from "none" to "block or inline block whichever you prefer

If that doesn't do it then it will be a different way, which needs the info as to which other method (s) to use

close the project file without saving your changes
if it works then save the project file as (original project name) and overwrite old project file with the changes


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,124 posts
Online Now

Robert Wilson wrote:
I appreciate it. I have attached a picture of the Element Tree for this portion of the page. Maybe this will show you what you need.
Thanks,
Bob


nope showing the element tree that doesn't help

which menu component di you use would help

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


Registered User
14 posts

Thank you for your help. I was able to get the text in the navigation bars to wrap individually so that the whole bar then disappears when the hamburger icon appears.
User 122279 Photo


Senior Advisor
13,267 posts

I've come late to the party here, and I'm glad you achieved something to your satisfaction. But to me it seems that you may have started at the wrong end of this. Well anyway, if it works...

Please be advised, that for those of us who are trying to help (and we are just users like yourself, helping others in our spare time), just an image of a problem is usually not enough to let us understand the issue. We need details, like what Wayan was asking, which component you were using. We have most of those components available ourselves and are able to quickly find what may be incorrect.
In some cases, if the problem is a bit more complex, we may ask to see your project file, and by that we mean the file you are working on in Site Designer. Some users seem to hesitate if asked to post their project file, but you can rest assured that we don't 'steal' any secrets. If you have sensitive or personal information in your file, then you could create a copy and just remove the details you don't want others to see.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2078068 Photo


Registered User
14 posts

Inger,
Sorry I wasn't trying to be difficult or evasive. I just thought the pictures would be what was necessary for evaluation so I thought I was keeping it simple. I don't have a problem posting the file but I can't seem to get the .RSD under 2mb. Which file should I post in the future? And what is the biggest contributor to the file .RSD file size?
I'm not a website designer and I used Visual Site Designer and this is my first time using Site Designer (3.5).
So you will probably see a LOT of problems with my site or things that could be done better.
My site is www.industrialandons.com
Thanks,
Bob
User 122279 Photo


Senior Advisor
13,267 posts

Hi Bob,
If you ever need to post your project file, it is indeed the .rsd file we would need. Maybe it can get under 2MB if zipped, but if not, people tend to use Dropbox, or some other cloud, or Wetransfer or something like that, or they even upload the .rsd file to their site and let us have the URL. And since you are using SD 3.5, it would be best to remind us, then if we edit something for you with the newest SD version, which is 4.0, you would not be able to open it in 3.5.

The file size usually increases quite a bit with images. Having said that, it would not be a good idea to remove them, then oftentimes we need to see what, or how much, space is being taken up by the images, if e.g. something visual is to be corrected. I don't know your skill with images, but it is a good policy not to pop them into a website right out of a good camera, they will then be much too large. Better resize them in some image editing programme before they go into the site.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
3,124 posts
Online Now

Hi again
One of the problems I can see is that you are not taking the slider thingy far enough down to the left past that first default blue breakpoint. It is a long way between that point and the widths of many modern day mobile devices. So by designing your layout just to the left of the first breakpoint which may look ok there, but as you move that slider left you need to keep watching the layout to see if it breaks or doesn't look good.
One shouldn't use devices as a crutch one needs to look at the layout but take the slider to around 318px, if the layout needs tweeking at that point then add a breakpoint, go to the tab "toggle breakpoints" select the option for the width of the breakpoint only which you are at (this ensures that any styling changes you make are not made at the higher breakpoints) fix the layout so it looks good and there you are a page that looks good from most mobile phone widths right upto desktops.

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

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.