-
Navigation bar (hamburger) in mobile version
Good morning. Can anyone direct me how to replace my wording "Navigation Menu" for the graphic (we call a hamburger) on the mobile version? The 3 bars that can represent the Nav bar.
website is here: www.bccsc.net if you need to see it.
Thanks,
Sue
-
Re: Navigation bar (hamburger) in mobile version
I suspect the text is linked to the menu. Can you select the text and see a link? If so add the hamburger on the MouseOff layer and link to the menu.
-
Re: Navigation bar (hamburger) in mobile version
No, it doesn't appear to have a link. Says Javascript.
-
Re: Navigation bar (hamburger) in mobile version
Ah, OK. Maybe Egg or Acorn or Siran will have a solution.
-
Re: Navigation bar (hamburger) in mobile version
Sue, how did you create this NavBar?
Acorn
-
Re: Navigation bar (hamburger) in mobile version
Hi Acorn. Used the one with the template, I think. Getting old to try to remember what I did 4 months ago...LOL
What do you recommend?
-
Re: Navigation bar (hamburger) in mobile version
Do you remember which template you used?
-
Re: Navigation bar (hamburger) in mobile version
Well, I guess I haven't lost all my brain power...why, yes, gwpriester, I do. Activate was the name.
-
Re: Navigation bar (hamburger) in mobile version
The best you could do with this is rename Navigation Menu MENU. But again, I am not adept with javascript. Navigation bars in web designer have to contain a shape and text. The hamburger symbol does not count as text. I tried a few things but no luck.
-
Re: Navigation bar (hamburger) in mobile version
Thanks gwpriester. I believe the javascript there in the nav bar just makes it so it doesn't open that link up to anything else.
If I knew how to link to a picture in the nav bar (which could be the hamburger), then I can do it!
I appreciate you trying. So very kind of you.
-
Re: Navigation bar (hamburger) in mobile version
You could try the following:
1. With the text tool click the menu text and edit until it is the correct width.
2. Then right click and Edit Navigation Bar.
3. Remove the tick at Adjust button width to labels and hit OK.
4. Completely remove the text. (You can't remove the text line itself but only the content.)
5. In the page and layer gallery expand the Navbar Group and the Group inside of it.
6. Click the S to the right of the Group that is located beneath the text line. (Almost everything will be hidden in your design now.)
7. Right click on the remaining objects and select Open Group
8. Add your burger graphics here and hit the save button. (Hit CTRL + A and do a zoom to selection to help getting an idea of where the group content is to be found.)
9. Repeat steps 5 to 8 on the mouse over layer.
-
Re: Navigation bar (hamburger) in mobile version
By the way. Maybe its only a problem with my internet connection but I don't think so.
A file on your server seems to be corrupt. It is roe.js in the folder index_htm_files.
Maybe you should re-publish the site and maybe you need to remove the Fast Publish option for this problem to be fixed.
You could also do an export to HTML to your local drive and upload that single file manually with an FTP tool. The file is static so that should not cause problems.
-
1 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
If you create a group of a rectangle with matching background colour and the hamburger image of whatever colour you require, sit it above the text, as in Siran's instructions above, you don't need to worry about the text as the navbar is converted to a bitmap on export.
Your site looks like it has issues to me too.
-
1 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
This works.
Create a simple button rectangle. Add some text and the hamburger icon. Group all.
Make the text and the rectangle the same color as the page background. IOW the text and rectangle are invisible. (In my example I have made them gray so you can see the objects).
No need for mouse over because this is for mobile variants.
Select the grouped objects and create a Navigation Bar.
-
1 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
Here's an example http://gwpriester.xara.hosting/hamburger/
The button is about half size to allow for expansion to the right for sub menus.
-
Re: Navigation bar (hamburger) in mobile version
Siran said you can also set the fill for the rectangle and the text to none. This is good if you have a background that is not a solid color.
http://gwpriester.xara.hosting/hamburger-2/. It works! And it works on my iPhone!!!
-
Re: Navigation bar (hamburger) in mobile version
Hi Siran and thanks for your instruction. I will give it a try. I'm not sure I understand it completely but will follow the steps and see where I get.
-
Re: Navigation bar (hamburger) in mobile version
Hi Siran. I get an error message each time I open up this website in Xara. I've reported it and many months ago they told me there would be a fix and none there hasn't been thus far. Appreciate you helping, maybe this is the culprit. I actually use both ways to publish websites. Anyway to removed it from Xara without a problem and maybe that will fix it locally?
-
Re: Navigation bar (hamburger) in mobile version
-
Re: Navigation bar (hamburger) in mobile version
Removed it, Siran. Do you know what this file is for? I don't think I have Fast Publish...maybe I did. I'm not sure what it is.
Sorry I'm not responding to you faster as I'm not getting notifications after the first few posts from gw..
-
Re: Navigation bar (hamburger) in mobile version
Quote:
Originally Posted by
SueB
. Anyway to removed it from Xara without a problem and maybe that will fix it locally?
Now the top slideshow doesn't work, so I guess that file is part of that show....
-
Re: Navigation bar (hamburger) in mobile version
I don't suppose you tried my suggestion. :rolleyes:
-
Re: Navigation bar (hamburger) in mobile version
Hi Sue. Your image slider is now back & working in desktop mode as it is in the mobile version. Previously the image slider wasn't working and there was no mobile variant at all.
Could I suggest the mobile variant has the menu on the left as presently sub-menus are forced to the left instead of the more obvious right?
-
Re: Navigation bar (hamburger) in mobile version
Hi Egg. When I deleted the file, that was suggested was corrupt, I lost the slideshow, as stated somewhere above.
I can move the menu, once I figure out how to try one of your suggestions. I'm a bit lost, as usual, as to what to do and what some of the terms mean. :(
-
Re: Navigation bar (hamburger) in mobile version
Quote:
Originally Posted by
gwpriester
I don't suppose you tried my suggestion. :rolleyes:
Not yet, as I wasn't clear what you meant by "create a simple button rectangle. Add some text and the hamburger icon. Group all."
-
Re: Navigation bar (hamburger) in mobile version
If I can do this, this is GREAT! I'm trying!!
Quote:
Originally Posted by
gwpriester
-
Re: Navigation bar (hamburger) in mobile version
Egg, I am working on your instructions with Siran, but not very successful. Tried GWPriester's and got lost. Since I've never created a nav bar, this is a bit of a stretch for me.....
When I tried GWPriester's way, I lost the navigation totally.
Any visual help you can give me?
-
Re: Navigation bar (hamburger) in mobile version
Quote:
Originally Posted by
gwpriester
Tried this. Yours is beautiful and wish I could create it. When I grouped it and went to make a nav bar, that selection was grayed out. :(
-
1 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
You have to have some text and a button shape usually a rectangle as part of the group. In my example, I grouped the text, the hamburger graphic, and the rectangle. And these all have to be on the MouseOff layer.
Select the button then try to create a nav bar.
You can also download my .xar file to see what I have done.
-
Re: Navigation bar (hamburger) in mobile version
I'm going to cry. Thanks so much, GWpriester!
I bet I was not on the right layer! I did a group (not soft group, right?)...just making sure before I venture onto this again. I will use your example to check it out. I'm sure this will help me. Thanks so very much for the visual!
Sue
Quote:
Originally Posted by
gwpriester
You have to have some text and a button shape usually a rectangle as part of the group. In my example, I grouped the text, the hamburger graphic, and the rectangle. And these all have to be on the MouseOff layer.
Select the button then try to create a nav bar.
You can also download my .xar file to see what I have done.
-
Re: Navigation bar (hamburger) in mobile version
-
Re: Navigation bar (hamburger) in mobile version
Hi Siran. Great instruction. I'm trying your way as I was not successful another one. Feel really stupid.
I got to your step 7 and could not find "Select Open Group." Right click did not give me that option and I tried looking for it in the menu/other places and could not find it. I have version 12.6.2, in case that makes it different. Otherwise, can you please help me get this step?
Thanks!
Quote:
Originally Posted by
siran
You could try the following:
6. Click the S to the right of the Group that is located beneath the text line. (Almost everything will be hidden in your design now.)
7. Right click on the remaining objects and select Open Group
8. Add your burger graphics here and hit the save button. (Hit CTRL + A and do a zoom to selection to help getting an idea of where the group content is to be found.)
9. Repeat steps 5 to 8 on the mouse over layer.
-
Re: Navigation bar (hamburger) in mobile version
Hey GWPriester. I tried your way. Looked at your file. I have not been successful not matter what I do. I cannot get the "create Nav bar" where it is not grayed out.
I'm not getting something that seems pretty simple.
Even copied yours, tried to change the hamburger to a different style and couldn't make that work either.
Any more suggestions?
You've done a good job...I'm just dumb!
-
Re: Navigation bar (hamburger) in mobile version
The button shape, text, and hamburger symbol need to be grouped and they should to be on the MouseOff layer.
You do not need to apply a SoftGroup. And if you soft group before you group, the Nav bar option is grayed out.
And right click on the page and select Page Options > General and make sure that the Document Type shows Web Document.
-
Re: Navigation bar (hamburger) in mobile version
GWprieter, did not apply soft group. :)
Button shape, text and hamburger were grouped and on the mouse off layer. Still grayed out.
Checked document type shows Web Doc, all good there too.
Quote:
Originally Posted by
gwpriester
The button shape, text, and hamburger symbol need to be grouped and they should to be on the MouseOff layer.
You do not need to apply a SoftGroup. And if you soft group before you group, the Nav bar option is grayed out.
And right click on the page and select Page Options > General and make sure that the Document Type shows Web Document.
After just typing this, I decided to try again...guess what???? Got the Create Nav Bar this time! Yipee...onward.
Will get back to you if more problems.
Thanks so much! Wonder what I did wrong all that time....
=D> Happy Sue now....until next time! Thanks so so so much!
-
Re: Navigation bar (hamburger) in mobile version
Try this in a new Website window. Create the same three elements and see if you can create a nav bar with these.
-
Re: Navigation bar (hamburger) in mobile version
I had tried that earlier, when I wasn't getting it to work. By accident, I put part of my reply in the quoted area above.
I don't know what I did, but I got it to work....I swear I was doing exactly the same in the previous tries....but happy to finally get it done. I must have made some error along the way. That's me!
Appreciate the patience!
Sue
-
Re: Navigation bar (hamburger) in mobile version
-
1 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
So the challenge continues, GWPriester! While trying to add all of my menu items, it added another hamburger to each one....and then I noticed since I had made a mistake at the beginning of working with it that I had checked "Site Nav Bar automatically, when I unchecked it and was adding my menu items and pages, when viewing, it was as if I never had unchecked it. It took the names of the pages as I had them, not what I wanted them to read or look like.
Then I tried to make another nav bar and had the same issue, that once the 3 items were grouped, the create nav bar was grayed out once more. I checked and I was on the mouse off, and grouped. What the heck???
Went to try again for a new document/website....here's a screen shot. Grouped fine but no create nav bar available. See screen shot.
Maybe someone can see what I am not doing right.Attachment 119362
Sue
-
3 Attachment(s)
Re: Navigation bar (hamburger) in mobile version
Are you doing this for the main variant or just the mobile variant?
Try this. Delete all but the home page from the Nav Bar Menu.
Make sure the [ ] Site Navigation Bar option is not checked.
Under the Home button (menu in my example), Click once to select Double-click to add button. (But DO NOT double click. I will know if you do this)
Now, check the Site Navigation Bar option.
This should add all the pages to a sub menu and the buttons will not have the hamburger icon.
In my example I have edited the Pop-up Menu Style. I added 4 pixels of spacing. And increased the font size. In the main Nav Bar Menu I added Separators under each menu item to make the menu easier to read.