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

[SueB]

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!

[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.

[SueB]

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!

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.

[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.

[Initiostar]

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.



Gary

[SueB]

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.

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.

[SueB]

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.

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.



Gary

[Initiostar]

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

[SueB]

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

[Initiostar]

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) : Sue_Beverlee.xar

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

Gary