Convert Sidebar Menu to Top of Page horizontal Menu
Autor: Giulio V.
Visitado 1528,
Seguidores 1,
Compartilhado 0
I currently have a Sidebar Menu and would like to have the menu moved to a Horizontal menu at the very Top of the page directly over the website header.
I hope this is possible. Any suggestions are appreciated.
Publicado em
Make a top-header.
Copy the menu from the sidebar to the top header.
Remove the menu from the sidebar.
Set the template to have no sidebar.
If you already have a header then just place menu on top-
Beware that if you have many menu-items the menu will maybe turn into a hamburger. You can make the height of the menu bigger and then the menu will wrap.
But on the lowest viewpoints it will turn into a hamburger.
Autor
Hi John,
I do already have a Header but can't figure how to move the menu up to the top.
Could you give a link please?
And/Or maybe a clip showing the content of your header?
Autor
Hi John,
Here is the link to my website. https://prolinesystems.net Thank you...
The menu is an object and can be used as often as you like.The settings for desktop and responsive etc. can be customized.If you no longer need the sidebar, it can be deactivated in the template.With the sticky bar, the menu etc. can also be made visible when scrolling down.
JJ.
As JJ tell, you should place the menu-object in the header - at the top. And then you could use the sticky bar when scrolling down the page ( because the menu scrools up with the header). I can see on your site that you already use the sticky bar for lower resolutions. Here you have the menu shown as a hamburger.
You should make the same for the desktop resolution as you have for the lower viewports.
Here: https://bramminginfo.dk/bramny03/byggeri.html
I have much the same as your site.
As I think the left-menu is the most effective way for navigating I present it for the user in desktop view.
I also have the main-menu shown on each page but it rolls up when the page is scrolled.
On each page I have a page-menu for the actual level ( shown as a hamburger). This is a redundant information when on a desktop - but I hide the left-menu for lower resolutions and then the hamburger is needed.
I also have the breadcrumb menu in upper left corner. This is very handy when you want to go up one or more levels.
I use special code, but much the same could be made without using special code.
If you copy the menu to the top of the header you have the main menu both on top and to the left.
And you hide the left-menu for lower resolutions.
For the actual level you have made hovering possible.
Only disadvantage of this is, that when the menu becomes a hamburger, the hovering will become a nightmare for the user.
Autor
John, Thank you,
This is good information.
When you say,
For the actual level you have made hovering possible. Only disadvantage of this is, that when the menu becomes a hamburger, the hovering will become a nightmare for the user. I'm not sure I understand this.
So, How would you make this better? Do you mean I should not use the Stick Bar?
I do know that I would like to make the hamburger menu, when it opens in a mobil device to look less confusing.
When I go into the settings it seems a bit confusing. What do you recommend for this?
I really appreciate your help. Giulio
Hello Giulio
I suggest you use the sticky-bar. Disadvantage of the sticky bar is, that positioning when using anchors will be wrong. If you intend to use anchors, I have an elegant and yet simple solution to avoid that.
The way the hamburgers side panel functions in X5, is not good.
I have removed the confusing hovering. This also has disadvantages. Disadvantage is, that instead of opening a new level in the sidepanel, then the user is directed to a page - and then eventually has to open a new hamburger to go down yet a level. I will make an idea post for a better navigation in the hamburger sidepanel. But as we all know, it could take loong time before (if ever) we see a solution.
Instead of the very confusing hovering I prefer the opening of a new level - but this way of navigating is also far from perfect. But I think it is better that the user has to open a hamburger more than one time, than it is that the user give up navigating the site because he gets very confused. Hope you understand what I mean.
How the navigation should be depends on the number of levels and on the number of menu items of the levels. And on the content itself.
Also of the impact the menus has on the look of your layout. It has to be effective but it also has to look nice.
My best advice is that you make some subfolders.
In each subfolder you put a testproject where you have the same content but with different layouts for navigation.
Then you test. You let some users test the testsites and the site that the users best like to navigate on, you choose for your real project. They have to test both using a desktop and a mobile, and eventually also a tablet.
For testing
Make a copy of your project. In this project you change the things you want to test for navigation and you set the destination for the project to a subfolder.
Eventually make another copy - do the same here, and change to yet another way of navigation.
This is the best method to find out how you want your final project to be.
It is very easy to delete the subfolders when testing has ended, and you know the way to go.
Autor
I am impressed by the solutions, but it is a little daunting for me to make my mobile menu look and work in a less confussed manner. The Subfolder thing maybe a bit more than I can handle.
Is this an X5 issue? I don't think this should be so confusing to accomplish.
I wish Incomedia would offer Remote Support so they could log into a customer's software and take care of some things. This would be very professional and very appreciated by their customers.
Here is my web address, I view this on my iphone 12 Pro and my mobile menu is looks pathetic. https://prolinesystems.net
Thank you to everyone who can help me at this time I am very frustrated. Giulio
When using the hamburger(mostly mobile) you have to choose between 2 bad solutions.
1- when you check for: hide the pop-up menu, then you will not have the very disturbing and nearly useless function of the sub-menus popping up.
2 - when the pop-us is hidden (as shown) then you will not have the very disturbing pop-up's - but - you will have to select the hamburger again on the next level.
In the example I gave a link for, I do not use the pop-up. I find this to be the least bad solution.
If this behaviour of the hamburger is not what you mean, then please some more information.
Autor
Hi John,
Thank you for the quick reply. Where do I find the place to hide the pop up menu?
here:
Settings for a level - and then
By the way - it is a good solution you have made. The left menu visible for desktop and then the hamburger for lover resolutions via the sticky top-menu.
If you need some code when using anchors, I have a good solution for that. The sticky menu can make the offset for anchors a bit tricky.
Remember that what you have made, require each page to be so "long" that scrolling is required - else the sticky top menu will not show and then no menu will be available. But that should be no problem with your "big" header.
Autor
Hi John,
I am using some of your suggestions, Thank You...
What do you mean you have some code for anchors? Please explain.
When the sticky top menu is used, it covers xx pixels of the top.
When an anchor is used, it places the content on top of the page, which means that the upper xx pixels is "hidden" behind the sticky menu.
It can be solved by using a dummy-row that is xx pixel high, just above the "real" row, and then let the "dummy" be the target for the anchor. But this is not a good solution.
In this post I suggest a solution : https://helpcenter.websitex5.com/pt/post/238608
I think INCOMEDIA should make this a feature in the software.
I was in doubt if my comments were useful for you, as you did not give much response and made new posts about the same I already answered - but apparently I have nearly understood what it is you wanted.
Good that you can make use of some of my posts. We are here to help each other.
Autor
Hi John,
I think I understand what you are refering to and appreciate your help very much.
I did look at your post regarding default anchors issue and agree that Incomedia should make this available.
In some older versions of X5 I remember we coud place a banner on top of our header and the header would move down to show the banner. This is not the case anymore as it covers the header.
I really like X5 and have been using it for years, but what I have found they provide things to enhance our websites but never go deep enough to make it more functional.
For instance, Why can't we have the ability to place an advertizing message on more than just one page? And provide the ability to adjust positioning?
And why the pop up has such a small X that is hardly noticable? The popup should go away when it is clicked Anywhere Outside of the popup like most any you see on the internet.
I have suggested several times to Incomedia to look into these simple enhancements but it seems to fall on deaf ears.
I hope they take a more pro-active approach and pay more attention to details that would make a good software into a great product.
Thank you John, Giulio
The showbox disappears when clicked outside.
You could try it here: https://bramminginfo.dk/egnsmuseet.html
Click "Bramming Egnsmuseum" and you will see a map in a showbox.
Click outside the map - or the X - and you will see it disappear.
Oh - maybe you meant the advertising pop-up. If - then just forget my former post.
Autor
Yes, I meant outside the popup...
I just checked the advertising - it should be possible to mark which page(s) you want it to be active for.
And - it should also be possible to choose a horisontal banner:
You are right - when using the banner it covers the header,
But if you use the cover, it will be shown to fit the page - and will disappear by scrolling. I think this is one of the best ways if you use advertisement.
Autor
I know you can choose which pages the the advertizing will show up on.
But what if you would like to have a different advertizement on a different set of pages I don't think this is possible.
In other words - different ads on different pages. Am I missing something?
Thank you, John
If you want different pop-ups on different pages then you have to use code.
I think we could wait long time before it comes in X5.
You can use a code generator like this:https://www.htmlbasix.com/generator/javascript-popup-window-generator
You could have some "hidden" pages that you use as URL's for the pop-ups.
If you want more sophisticated pop-ups you could find another code.
This is my best bet - but why do you need different popups?