Nav bar warning "You have at least one button with both a link and a menu

Dumb question here, I've been adding and moving around things in the nav bar and now get that warning. How do I figure out which one or ones need fixing?

I don't want to remove the button. I've done that before and because I have so many links, I cannot figure out which one.

Can you please explain more what this means and how easy it might be to identify and how?

Here's the website: https://www.bodaciousbeardies.com

Thanks much!
Sue

I think this happens with drop down menus. If the drop down menu links to a page and has a drop down menu you can see this warning.

If everything works OK then maybe not worry about it.

Or, unless the button needs to link to a specific page, remove the button link to the page and keep the drop down menu.

This is so confusing and thank you for your answer. With the dropdown menu, if there is a link, it seems to make that message, so I have to delete the link, add it onto the sub category and link it. This makes no sense to me because in the past, with out programs, that initial nav bar and title could have a link.

Why is this so cranky in the Web Designer program? Anyone know?

Sue

Sue, when you are using a smartphone there is no opportunity to have both a link and a sub-menu.
You need to ensure a touch either goes to a link (no sub-menu was there) or it opens a sub-menu.
If you are sure you will never have a smartphone viewer then you can ignore the warning.

If you need that link and a sub-menu, you create a sub-menu entry to go to the original top link.

Nothing cranky with your XDA; technology evolves.

Acorn

Simply put. Any button that opens a sub menu should not have a link. In the URL section, tick 'Do Nothing'.

Hey Acorn. Thanks for the reply. For the Smartphone, I do make a mobile version with a completely different menu.

And that's what I had been doing was creating for instance "Home" menu, and sub-menu then "Home" too. But maybe it's not necessary this way for the computer version then? That's where I get the menu error.

Sue

Thanks, Chris. Will work on that!

Quote:

---

Originally Posted by SueB

Hey Acorn. Thanks for the reply. For the Smartphone, I do make a mobile version with a completely different menu.
And that's what I had been doing was creating for instance "Home" menu, and sub-menu then "Home" too. But maybe it's not necessary this way for the computer version then? That's where I get the menu error.
Sue

---

Sue, you've cracked it (until the SmartPhone viewer chooses to look at your Main site).
It isn't an "error" it is an advisory.

Acorn

Maybe it's better to use the mobile version? What would you do?

Sue

Quote:

---

Originally Posted by SueB

Maybe it's better to use the mobile version? What would you do?
Sue

---

Sue, wrong person to ask - I would not use a Xara NavBar in the first instance.

For Main
Top Level: Home, about us, contact Us do not need sub-menu entries.
For My Beardies
Just open the page my-beardies.htm
On the page just place ordinary links to open each dog's sub-pages.

By working though each set, you can move away from sub-menus and just have Buttons or Text Headings (my preference).
Yes, you may have to add a new holding page as for the Links.
Change the last Link to Purchases and unpack as well.

If you use Buttons you will gain a indication of the page you are on.
At present if I am "herding", I have no idea how I go there or how to again.
The concept is breadcrumbing.

I hope this helps.

Acorn

Acorn, I have a reason to my madness. Some might not want to go to one page, then another and another to see all my dogs, or just know they want to see "Emerald's" page.

Can you show me a site like what you are sharing with me to do? Remember, I'm visual... I like some of your suggestions!

Not sure what "text" headings mean... or even buttons....show me..please..

Sue

Sue, a Button is just a blob with a Link; it goes to one place.
A Text heading, is text with a Link that also goes to one place. Such a Link can have Mouse Off, Over and Visited colour so acts like a button.

You already have the start of things with My Beardies.
Say, it was a Text Link to that page, you have a quick way to Tootsie in the image but not the name.
I would add both, for those who are visual and those who follow the words.
When in the Toosie page, you need a text line (breadcrumb) that states My Beardies (with a backlink) > Tootsie (with no link). The Tootsie page does not open when you click the image, it still goes to Emerald's.
On Tootsie's page, you then add Text Links, like View Emerald & View Sapp...
Presently, you can go down but must use the menu to go up, left and right. Left/right ae problemsatic has you need to know whwre you are to go up one level to then pick left or right.

About our Litters is a dead page with no other site links from it.
You need the five related pages with links to them.
Eventually, you will have a page with a breadcrumb: Litters > Emerald's Litter 2021 > About Z-Sire > Z's Sire-Dame-GrandDam, where all the text headings (or buttons) have links to allow you to move up the tree.

Every page needs to have a breadcrumb trail to go back to the top.
Currently, your menu is failing to go to the right pages or opens a new Tab in a number of spots and without this type of validation, you will struggle.

Acorn

Thanks, Acorn. You just caught a few things that I was doing/adding that I hadn't finished, like the Tootsie picture linking to Emerald...I copied and pasted Emerald's picture and then had to find a picture of Tootsie and had just done that page and forgot to relink to the right page as Tootsie's page hadn't even been started. Her page has blank spots for pictures, waiting for me to find the cute ones to share..lol

I think if I put link like "back" or arrows to go back and forth, that would make more sense to me. I get that these pages should be easier to just follow from one to another..agree!

Some of this site is so big and I will work on it being more fluid like that. Thanks!

Sue

I'm with you when you say you're a visual person, Sue.

I started trying to write how I'd trim down the menus and gave up. I then decided to do a couple of blank pages, and one thing lead to another. I would like to have tidied it up, but the phone finally rang, so I'm off to earn some pennies instead.

>>> Attachment 131165 <<<

Quote:

---

Originally Posted by Chris M

I'm with you when you say you're a visual person, Sue.
I started trying to write how I'd trim down the menus and gave up. I then decided to do a couple of blank pages, and one thing lead to another. I would like to have tidied it up, but the phone finally rang, so I'm off to earn some pennies instead.
>>> Attachment 131165 <<<

---

Chris, I have shamelessly lifted your offering and placed my menu structure into it.

Attachment 131169

I liked your active page under-bar.
I took the sub-menus to from a tree structure to reflect the pedigree approach that Sue should understand.
I placed the Page Title above the menubar to focus the viewer.
I blended in the top image to the Pasteboard and the Stretch rectangle.

The aim was to offer a cleaner presentation with a structure that can grow with additional content.

Acorn

Thanks Chris and Acorn. Wow, now I "get" what you are talking about. Thank you both for contributing to helping me "see" what you were saying. I LOVE IT!

1 more question: How do I do the "jump" to the content?" I've never done that. Is that an "anchor"?

And then upon combining those pages together, like Emerald's, and linking to the content, what's the best way to help do the SEO stuff? I always thought that having one page for each would help SEO..I'm guessing maybe not?

You are just the BESTEST ever! You taking the time to show me is just awesome. Thank you so very much!

Quote:

---

Originally Posted by SueB

1 more question: How do I do the "jump" to the content?" I've never done that. Is that an "anchor"?
And then upon combining those pages together, like Emerald's, and linking to the content, what's the best way to help do the SEO stuff? I always thought that having one page for each would help SEO..I'm guessing maybe not?

---

Sue, if you go Beardies > Emerald . (sticky) Emerald, the links Chris put there are Anchors.

Select a Shape or word and in Names, type in something relevant.
This is now a place on your page that has an Anchor.
If you have the page URL than adding <url>#yourAnchorName will jump to the Anchor yourAnchorName.

In your menu, you would select the text and then use Web Properties > Link > Link to anchor: yourAnchorName.
When you click on this text, the page jumps to the anchored place.


To "do SEO stuff", mainly ignore it.
Each page should have its own Page title - Web Properties > Page > Page title.
Describe the page in around 30 words that uses similar words that are on the page already.
By all means, add in a few Keywords.
Each page should have mainly different detail.
Do include one Heading 1 - I did for the Page Title on the page.
Using Heading 2 and Heading 3, adds some structure.
Always add Alt Text to your key pictures.
Try also giving them an Image filename.

Be consistent, be accurate, be thorough.
Do this and SEO fades into the background as you ae designing everything properly.

I focus more on Accessibility, as this is more important and do it right brings your SEO along.
In Preview, press F12 and click on Lighthouse > Generate report.
This will tell you what it thinks your SEO is like, with suggestions.

Acorn

Now that's a lot of purple.

Jumping to certain content:
Name an object you want to jump to. In this case I used the respective title bars, Information and Hollywood Actor. (select object - Utilities > Names)
Select text or an object and Utilities > Web Properties > Link To Anchor (radio button) and using the drop-down menu choose the name you want to jump to

The ancestry tree effect looks great and fits the subject perfectly. I, personally, don't like the sticky menu box on Emerald's page now I've seen it a few times. And that purple...so much...purple :-O

Chris, agree, too much purple...but it's okay..I can figure that part out as I go along.

I'm confused, Acorn. If I combine all the "Emerald" pages to one page, then how would I link to each title, page when it's one page now?

Chris, I see a few of the names there in the drop-down menu to choose from but nothing there that's one of my pages. So obviously, I'm missing how to change things and do the anchor.

I like the idea of combining each dog's thing together, but am confused about then loading time, length of pages..maybe I don't need to do that and then I'm really lost!

I looked at your anchor, I get that some of it. When I try to view more of what Chris did by looking at the anchor, I don't see anything in there, like "information."

And Acorn, I'm assuming and maybe wrong that my page names then need to be with a "#" ahead of the name? I can't find anchor names as an example on Chris's that he shared.

Lost again....

On Emerald's page, if you select the bar Hollywood Actor and Utilities > Names, you will see it is named 'actor'.
Now, click any object (the photo with the sheep for example) and Utilities > Web Properties > Link To Anchor (radio button) and the drop-down box. You will see 'actor'.

I, personally, like to keep content in neat little boxes. Putting everything Emerald related in one section makes sense to me, however, you are right, there may well be too much for a single page. You have a few options, Pop-Up pages using layers, separate pages for certain sections (Sire/Dam for instance) or even sub sites, but that's a whole new kettle of Beardies.
The linking would be the same, whichever route you choose.
All on one page? - Link To Anchor
Separate Pages? - Link To Page
Pop-up layers? - Link to Layer

Chris, thanks for pointing me in the right direction. I've always done separate pages, as my thought was it would help with people trying to find certain things easier in "google."

I was started using Dreamweaver, self-taught. Long story..

I haven't done a pop up...but I will look into what that looks like too. This anchor thing is quite enticing, work in the long wrong..but quite a bit to re-vamp the site. I'm willing to, as I really like what you showed me and how it makes more sense, less complication.

I really appreciate you taking the time out of your day to help me..visualize it and Acorn to help (even if I do get a little lost, cause he's way smarter than I understand sometimes.)

Emerald does not have as many pages I think as "Sapphire" does and that will now need to change too...wow, thank you so much!

Okay, I lied, one more question...ACORN: On your example that you helped me visual what Chris was doing, how can I then make "Beardies" show the other names below it as links and hide if someone then goes to "Litters" etc?

I've always used Nav bars to do this for me in a way...but I like your way better...or was this just the visual to see that it links to that one page? But could I do a that way, so that if someone wanted to just go to one dog's page, they don't have to go to the one page and then another page??

Got time to help me see how to do this?

Sue

Acorn may well have turned in for the night.

It looks like he used the same theory as I did. The 'main' menu (Home Beardies Litters Links Contact About Us) is repeated on all pages. The 'sub' menu (Tootsie Emerald Sapphire Ebony Winston) is a separate menu made up of the 5 text and a rectangle background. Create once, then simply copy and paste in place on the pages that need that particular sub menu.

It doesn't get automatically created as it would using a NavBar. You create it manually and have full control of how it looks and behaves. I join Acorn's dislike of the in-built NavBar solution.

Thanks, Chris. Got the idea now....

Would you use this same method for your smart phone/mobile version then?

I'd certainly leave the page construction the same as possible, but I'd use hamburger (stupid name) menus for the mobile site.

I'm heading out for the working day, but I'll have a mess around this evening. I'm thoroughly enjoying myself playing with your Beardies and there's no expectation to do what I suggest, I'm just having fun at this point.

Quote:

---

Originally Posted by SueB

Thanks, Chris. Got the idea now....
Would you use this same method for your smart phone/mobile version then?

---

I would get Main the way you want first.

While I agree a Hamburger might be the first choice, i might consider just a top-level menu and Next/Previous buttons.

This means do everything as pages and avoid Layers.
You gain in flexing the pages into different arrangements more readily.

Acorn

Quote:

---

Originally Posted by Acorn

I would get Main the way you want first.

While I agree a Hamburger might be the first choice, i might consider just a top-level menu and Next/Previous buttons.

This means do everything as pages and avoid Layers.
You gain in flexing the pages into different arrangements more readily.

Acorn

---

Acorn, what you mean by "everything as pages and avoid layers," is that there would still be some layers, like the background color but not the "mouse over Mouse off" layers and such, correct?

And yes, I have the "hamburger" menu on the mobile site, so I can either do it that way and then try also the next and previous buttons too...

I'm thinking of putting everything into another folder, deleting the mobile and working on the computer site, then adding the variant. Is this what you would do too?

And thanks, Acorn, for piping in. You both are really helping me to refine this rather large site into being a bit easier once done. I love that you are both willing to help someone learn a new method!

Sue

Quote:

---

Originally Posted by Chris M

On Emerald's page, if you select the bar Hollywood Actor and Utilities > Names, you will see it is named 'actor'.
Now, click any object (the photo with the sheep for example) and Utilities > Web Properties > Link To Anchor (radio button) and the drop-down box. You will see 'actor'.

I, personally, like to keep content in neat little boxes. Putting everything Emerald related in one section makes sense to me, however, you are right, there may well be too much for a single page. You have a few options, Pop-Up pages using layers, separate pages for certain sections (Sire/Dam for instance) or even sub sites, but that's a whole new kettle of Beardies.
The linking would be the same, whichever route you choose.
All on one page? - Link To Anchor
Separate Pages? - Link To Page
Pop-up layers? - Link to Layer

---

Can you explain the "Pop-up layer"? I understand all on one page and separate pages.

Thanks,
Sue

For the content that isn't the main focus, extra info, an aside or a post script type of thing, you can place a line of text, or an object to act as a link that triggers a Layer.

Layers are created in the Page & Layer Gallery and are hidden until triggered by a link. Open the attached .web and rip apart the last page 'emerald'. Rony and Shelby Ann's pedigree charts are pop-up layers (they would need re-drawing if you wanted to go this route). All 4 Siblings are pop-ups too.

The hardest part was to have the skinny menu for the anchors. I wanted to create something that would be relatively easy to explain should you want to use it. Don't use that menu bar. It doesn't even look very good and has a few fiddly workarounds to make it function. It's rubbish, pretend it isn't there.

>>> Attachment 131178 <<<

I concentrated on Emerald and enjoyed playing around with the project. Give Emerald a scratch behind the ear from me next time you see her.

Thanks so much, Chris. I feel encouraged to take this on. I like so much of what you have showed me. Makes so much more sense and ease of flowing! Emerald is a really sweet girlie. I will give her a rub on her ear for you...she loves men! She lives here so she is with me wherever I go pretty much!

Again, so much appreciation for you time and patience with me...
Sue

Hey there again. I tried some of this method on my mom's website, much smaller. I have troubles, right here in river city!

The "menu" that I created works fine with the anchors, except the last one "volunteering." I tried redoing it and it's still not working...help!

https://www.beverlyee.com/

Well, I have no idea what I did wrong, but I kept monkeeying around with it and redoing it and now it's working!

Create a rectangle the same size and colour as your 'About Beverly', 'Contact', etc and place it behind the links.
Change the menu text colour to white.
Marquee select the rectangle and all the menu text, make sticky and bring to the front.

Are these instructions to make the "menu" a sticky and slide with the page? If so, on this one, it's probably best to not do that.I may end up trying some of that with mine though.

I'll have to try what you wrote out before I venture too far. Interesting stuff, thanks!

Quote:

---

Originally Posted by Chris M

Create a rectangle the same size and colour as your 'About Beverly', 'Contact', etc and place it behind the links.
Change the menu text colour to white.
Marquee select the rectangle and all the menu text, make sticky and bring to the front.

---

Yes, it would always keep the menu on screen. If you're a little nervous of going too far too fast, then don't do the above. The bar would be in the wrong place and would require a little fiddling to make it look right. It was just the next step if you had liked to have taken it.

This, and another thread >>> Header across the Page (talkgraphics.com) <<< have brought up a couple of 'tricks' that should be straight forward, but aren't. A bit of fiddling, querying and possibly a touch of whining are on the horizon me thinks.

Quote:

---

Originally Posted by Chris M

Yes, it would always keep the menu on screen. If you're a little nervous of going too far too fast, then don't do the above. The bar would be in the wrong place and would require a little fiddling to make it look right. It was just the next step if you had liked to have taken it.

This, and another thread >>> Header across the Page (talkgraphics.com) <<< have brought up a couple of 'tricks' that should be straight forward, but aren't. A bit of fiddling, querying and possibly a touch of whining are on the horizon me thinks.

---

Good suggestion Chris, otherwise there is no way back other than scrolling back to the top of the page. However, rejig the header (menu and rectangle) and make this sticky; have the logo with a same colour rectangle (not sticky) - this then slides under the menu bar.

I'd remove the page border (looks like it is part of an old Xara template), I would have a top-of-page icon and link placed on each anchor heading and move the social icons to the menu bar.

Attachment 131181

Gary

A bit over my head I think, looking at the link you gave..sigh. On this site, I think it's okay without but I think on the dog site, I do need something as many pages will be long.

Quote:

---

Originally Posted by Chris M

Yes, it would always keep the menu on screen. If you're a little nervous of going too far too fast, then don't do the above. The bar would be in the wrong place and would require a little fiddling to make it look right. It was just the next step if you had liked to have taken it.

This, and another thread >>> Header across the Page (talkgraphics.com) <<< have brought up a couple of 'tricks' that should be straight forward, but aren't. A bit of fiddling, querying and possibly a touch of whining are on the horizon me thinks.

---

Initostar, I like your suggestion. I don't fully understand it but AGREE that it needs "top of the page" and not sure how to do that with the anchor. So much to learn and the words sometimes just go over and I'm like huh...

Not sure how to do the "menu" as a sticky so it looks right and doesn't obscure the page...and look funky.

Quote:

---

Originally Posted by Initiostar

Good suggestion Chris, otherwise there is no way back other than scrolling back to the top of the page. However, rejig the header (menu and rectangle) and make this sticky; have the logo with a same colour rectangle (not sticky) - this then slides under the menu bar.

I'd remove the page border (looks like it is part of an old Xara template), I would have a top-of-page icon and link placed on each anchor heading and move the social icons to the menu bar.

Attachment 131181

Gary

---

Sue, I can post a working example of my suggestion for the Beverlee site header/menu over the next day or so (same principles as the Mint demo you refer to). Personally for the Beverlee site, I'd revert to using standard pages. I can see the 'dogs' site is more complicated though.

If you can post a copy of your Beverlee index page or the Xara template you used, I should be able to convert the template for you; sometimes these templates have odd quirks in their page layouts!

Gary

Hi Gary. Thanks so much. I can see the reasoning with making the Beverlyee site a regular one but it was fun to learn a few things and she likes it this way a lot...

I've always started with templates in Xara Web. I was a dreamweaver person before and everything from scratch. So it' just easier for me to work through quirks usually, even if I don't know what I am doing.

I'll attach the *.web, if I can figure out how. I tried but it didn't show up even though it looked like it was uploading it.

Template: Under "Website Themes", "Wildside Theme" that's where I started. Sorry I couldn't get the *.web one up for you. :(

Sue

Quote:

---

Originally Posted by SueB

Hi Gary. Thanks so much. I can see the reasoning with making the Beverlee site a regular one but it was fun to learn a few things and she likes it this way a lot...

I've always started with templates in Xara Web. I was a Dreamweaver person before and everything from scratch. So it' just easier for me to work through quirks usually, even if I don't know what I am doing.

I'll attach the *.web, if I can figure out how. I tried but it didn't show up even though it looked like it was uploading it.

Template: Under "Website Themes", "Wildside Theme" that's where I started. Sorry I couldn't get the *.web one up for you. :(

Sue

---

OK no problem Sue - it was easier to start from scratch: this is a test template that works across desktop, tablet and mobile. https://initiostar.co.uk/demo/sue/#

It is a one-page standard website, 1200px desktop width, single variant 540px wide, Scale-to-fit-Width maximum 1200px. The menu links are to text headings (where the target text is a Heading 2 style). Personally, I would still revert to using more pages as the expected page load time for a full-content mobile variant is >5s.

The test template is entirely adaptable, but it maintains a style consistency with text styles and named colours (easy to change across the site) : Attachment 131208

The mobile variant uses a common hamburger icon as a 'top-of-page' link in order to maximise the viewing window; there is a single top-of-page arrow in both variants too.

I have left the standard mobile variant menu layer in situ should you want to experiment with it, but avoid popup links to anchors (it can get confused without some additional code).

There are (IMO) better ways for creating a picture gallery (but that's a whole different storyline).

Hopefully, this give you a few ideas - happy to answer any questions :D

Gary