Link text on popup layer

[Acorn]

Joy, on the menubar, I found it easy to stretch out the top menu item boxes to all the same width and match the rollover sub-menus to the same width.

It is by far, cleaner.

Acorn

[Initiostar]

1. On each of your submenus you have grouped a text area (where you have links) with the button and surrounding rectangle. This will not work - group the button and the rectangle ONLY and leave the text area as is (example XAR attached). YES!!! THIS is what I forgot! UGH! Thank you so much! You are a LIFE SAVER!

2. Avoid overlapping groups - your first two submenus overlapped (you can make all the layers visible to check they do not). Otherwise the MouseOver animation only works on the button area that is not bound by the overlapping group. Ahhh, this gives me heartburn! Sigh... If I make it so the groupings don't overlap I have to make the text super small... otherwise I have to unevenly space out the buttons... and still make the text smaller to fit them on the page. (This client is wanting a very specific look and it seems I'm going to need to become a salesperson to convince them they really want something different. That's just not going to happen. ) Perhaps I could convince them no mouseover - just click and have drop down menus.

It does now when you have a link, but you need to ensure you have a contrasting MouseOver colour in the Web Properties dialogue box. -

I have put additional notes in the XAR doc - most relate to consolidating layers on to the MouseOff layer where appropriate and not having layers below the MouseOff layer. I would set the Scale-to-fit-Width maximum around 1280, not 2400 (tested on a 4K screen). I am using WOW Slider in the background so have to put that on a layer behind the 'sticky' header info and menus. Additionally, I tried setting the Scale-to-fit Width maximum to 1280 as you suggested, but then the site content does not reach the edges of my computer screen. The smallest maximum number I was able to set it to and still have it fit to the edge of my screen was 1600! I, too, do not like it looking so big, but I am unsure how to resolve this and still have everything fill the whole screen. Suggestions?

Hopefully this gets you restarted. I super appreciate the time you've taken to help me, thank you!

Joy, can you send a screenshot including the WOW slider background with the client's preferred outcome and I will take a look tomorrow. MouseOver has little effect in the mobile/tablet world (touch devices); the bigger challenge is to create a site that looks good across mobile, tablet and desktop. Forget about filling the screen - the pasteboard is your friend on the desktop and can help balance the visual image the visitor sees. I'd adopt Acorn's comments on the dropdown menus, but depending on what the WOW slider background is meant to achieve, it may be possible to manage the menus differently to better effect.

Gary

[sorengen]

Joy, can you send a screenshot including the WOW slider background with the client's preferred outcome and I will take a look tomorrow. MouseOver has little effect in the mobile/tablet world (touch devices); the bigger challenge is to create a site that looks good across mobile, tablet and desktop. Forget about filling the screen - the pasteboard is your friend on the desktop and can help balance the visual image the visitor sees. I'd adopt Acorn's comments on the dropdown menus, but depending on what the WOW slider background is meant to achieve, it may be possible to manage the menus differently to better effect.

Gary

Hi Gary, here is a link to the site in progress. http://www.designerjabs.com/CLCA-website/index.htm. Mind you, this is before any links have been added, or menu bars fixed according to the advice I've been given. I have been working on changes all day and have not updated since yesterday. But the look of the main menu bar is what the client wants. (Except, now I know why those mouseovers won't work until they rollover beyond where grouped objects overlap!) The client wants that rollover, they want the font large - easy to read, they want the buttons evenly spaced, they want those box colors in the back ground. I'm trying to figure out how to keep the font large without the groupings overlapping so that the rollover effect can still happen and the drop-down sub menu stays open to be able to click on the links. HA! Tall order, I know! Sigh... For now, I've changed the rollover to click and open popup, where the site visitor can then click on the links. However, once I got all the header elements working satisfactorily, I made them all repeating and voila! none of them work when viewed in the browser! Me thinks I've chewed off more than Xara can handle...

Apparently, I'm uneducated in how to make use of my pasteboard... do tell! I will be making at least one mobile variant and realize it's going to be a bear. Sigh... The WOW Slider will not be used for that. And the menu bar will be completely different. However, it was suggested to me that once I have the main website completed, setting it to Scale-to-fit-Width could eliminate the need to create a tablet sized version, that I should only need to make a mobile phone-size version.

I'm happy to share the files I'm working with here, but not sure how to do that with the WOW Slider files and folders as part of the working document... other than a link to my G-Drive where I could share it. Thoughts?

[sorengen]

Joy, on the menubar, I found it easy to stretch out the top menu item boxes to all the same width and match the rollover sub-menus to the same width.

It is by far, cleaner.

Acorn

Ok, I gave it a try. It seems the first menu rollover (About) works as it should... but then the rest of them don't! I really need this to work, and I just can't understand why it won't!??? I've attached the file.

menubar_issues.xar

[Initiostar]

Hi Gary, here is a link to the site in progress. http://www.designerjabs.com/CLCA-website/index.htm. Mind you, this is before any links have been added, or menu bars fixed according to the advice I've been given. I have been working on changes all day and have not updated since yesterday. But the look of the main menu bar is what the client wants. (Except, now I know why those mouseovers won't work until they rollover beyond where grouped objects overlap!) The client wants that rollover, they want the font large - easy to read, they want the buttons evenly spaced, they want those box colors in the back ground. I'm trying to figure out how to keep the font large without the groupings overlapping so that the rollover effect can still happen and the drop-down sub menu stays open to be able to click on the links. HA! Tall order, I know! Sigh... For now, I've changed the rollover to click and open popup, where the site visitor can then click on the links. However, once I got all the header elements working satisfactorily, I made them all repeating and voila! none of them work when viewed in the browser! Me thinks I've chewed off more than Xara can handle...

Apparently, I'm uneducated in how to make use of my pasteboard... do tell! I will be making at least one mobile variant and realize it's going to be a bear. Sigh... The WOW Slider will not be used for that. And the menu bar will be completely different. However, it was suggested to me that once I have the main website completed, setting it to Scale-to-fit-Width could eliminate the need to create a tablet sized version, that I should only need to make a mobile phone-size version.

I'm happy to share the files I'm working with here, but not sure how to do that with the WOW Slider files and folders as part of the working document... other than a link to my G-Drive where I could share it. Thoughts?

Joy,

I get it - your client wants a large high impact menu. Here is take 2 with a proportionally sized dropdown menu. (Churches may be better than Tombstones ).



1. Variants & Sizes - opinions vary, but now I use a 1200px width for the desktop, 480px for the mobile and Scale-to-fit-Width with a maximum scale at 1200px.

2. Pasteboard - you have your sticky logo to the left - I added a standard vertical Navbar to the right - squeeze the browser to see the effect. I sometimes use the pasteboard to create a cover for the browser (background photos and videos) dependent on the design approach (e.g. https://hypnosis-retreat.co.uk/ & https://www.dstiling.co.uk/ )

3. WOW Slider - at the moment, your menu will overlay the background WOW slider in one way or another - dependent on what other content you plan to put on that page - you could place a slider (or banner video) that sits below it.

You have a working demo again though - and you can easily change the coloured buttons back to your blue.

Gary

[Boy]

Here is take 2 with a proportionally sized dropdown menu.

Really nice menu, Gary!

[sorengen]

Joy,

I get it - your client wants a large high impact menu. Here is take 2 with a proportionally sized dropdown menu. (Churches may be better than Tombstones ).



1. Variants & Sizes - opinions vary, but now I use a 1200px width for the desktop, 480px for the mobile and Scale-to-fit-Width with a maximum scale at 1200px.

2. Pasteboard - you have your sticky logo to the left - I added a standard vertical Navbar to the right - squeeze the browser to see the effect. I sometimes use the pasteboard to create a cover for the browser (background photos and videos) dependent on the design approach (e.g. https://hypnosis-retreat.co.uk/ & https://www.dstiling.co.uk/ )

3. WOW Slider - at the moment, your menu will overlay the background WOW slider in one way or another - dependent on what other content you plan to put on that page - you could place a slider (or banner video) that sits below it.

You have a working demo again though - and you can easily change the coloured buttons back to your blue.

Gary

Incredibly beautiful, Gary! Thank you so much! I really appreciate your help with this. I will take a look at how you put it together so I can see where I've gone wrong. I must learn.

[Acorn]

Ok, I gave it a try. It seems the first menu rollover (About) works as it should... but then the rest of them don't! I really need this to work, and I just can't understand why it won't!??? I've attached the file.

menubar_issues.xar

Just must have had a bad day.

No links to Layers.

Don't use Snap to Grid.

menubar_issues (ACORN).xar

Acorn

[sorengen]

@Initiostar & @Acorn - Ok, so the menu bars look great and are functioning when I open them, but as soon as I apply sticky the mouseover function works still but does not allow me to click on the links. Is there a way around this? A way to force it to allow me to have links but remain sticky?

[Initiostar]

@Initiostar & @Acorn - Ok, so the menu bars look great and are functioning when I open them, but as soon as I apply sticky the mouseover function works still but does not allow me to click on the links. Is there a way around this? A way to force it to allow me to have links but remain sticky?

I think you may have uncovered a conflict/bug with a MouseOver animation and Sticky objects on a popup layer - I ran a test which caused a sticky text area NOT to stick as expected! In my case text disappeared up the page on its popup. I will post what I believe the issue to be later, but in the meantime, I have a solution which I think works better than having your large menu bar hog a lot of permanent space on (at least) the index page.

Attachment 127968

Here is the principle (XAR attached):

1. Let the large menu bar scroll up the page and out of view, have a 'hamburger' icon with a link to Top-of-Page that retrieves the menu by scrolling it into view from the top.

2. Optionally: you can add a slim NavBar that is sticky at the top of the page (always visible) and it too can be used to bring any submenu into view (again by scrolling it into view from the top). In my case I have used a Javascript link to the Xara generated popup id: xr_cpu(n), where "n" is the internal number assigned to each popup. To find the correct number, create a link as normal (preview in Chrome/Firefox) and you will see that in the bottom left of your browser "javascript:xr_cpu(n)" for each popup. You then add the command to open at the top of page "javascript:xr_cpu(n);xr_top()"



3. For each page that your submenu's take the visitor, I would use a simple standard NavBar, similar to the slim NavBar in (2) - note the popup number (n) changes for each popup on each page.

When you come to do the mobile variant this approach might help.

I will post the conflict/bug later - it could just be me - and there is likely another way getting the large menu to stick correctly!