Jump to content
Sign in to follow this  
artsigns

Fix Menu Tabs / Cannot click

Recommended Posts

artsigns

Hi there Got some custom code for platform pro here and cannot click the links anymore The header image overlaps the menu slightly so if you try to click a link it just reloads the home page http://www.cupcakeswithlove.net I've uploaded a screenshot to explain it easier/faster and what i'm trying to achieve if anyone knows how would be hugely appreciated Cheers http://www.cupcakeswithlove.net/etc/fix-menu-1.png

Share this post


Link to post
Share on other sites
kastelic
For some reason #nav_row was set to z-index:-100 which would indeed make it unclickable. Try changing it to 1000: [code] #nav_row { z-index: 1000 } [/code]

Share this post


Link to post
Share on other sites
artsigns
Thankyou for reply, they are clickable now but they overlap the image above of the store fron pull down Is there a way to have them appear behind but be able to click them still, ie by disabling the header image as a clickable link to the home url and place a div as a link over the cupcakes with love logo on the top right http://www.cupcakeswithlove.net Many thanks again!

Share this post


Link to post
Share on other sites
Rob
Which browser are you using, or did you change something since posting that reply? I don't see any overlap in the menu.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
artsigns
Thanks again for help, in chrome it overlaps the menu and in firefox there's suddenly a huge gap between the menu and header (approx 80px) can attach screenshots if necessary .. cheers

Share this post


Link to post
Share on other sites
artsigns
the url http://www.cupcakeswithlove.net/ screenshots http://www.thesignschool.co.uk/etc/chrome.png http://www.thesignschool.co.uk/etc/firefox.png the code we are using body{ } #primary-nav li, a{ -moz-border-radius: 0em 0em 1em 1em; border-radius: 0em 0em 1em 1em; font-family: 'Coustard', serif; } #nav_row{ margin-top:-36px; position:relative; z-index:1000; font-family: 'Coustard', serif; } #nav_row ul{ padding-bottom:-10px !important; float:none !important; text-align:center; font-family: 'Coustard', serif; } #primary-nav li, a{ float:right !important; display:inline !important; font-family: 'Coustard', serif; } #branding .content-pad, #branding .branding_wrap { padding-bottom: 0; margin-bottom: 0; margin-top: 0; padding-top: 0; } many thanks again!

Share this post


Link to post
Share on other sites
Jenny
The error lies within your #nav_row custom CSS positioning. Try this: [code]#nav_row { margin-top: -30px; position: absolute; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
artsigns
thankyou again for reply the code above will let you click on the very bottom part of the link but is a bit tricky! is it possible to increase the height of the menu tabs? many thanks again

Share this post


Link to post
Share on other sites
Kate
The links seem to be entirely clickable to me. Did you get this sorted out?

Share this post


Link to post
Share on other sites
artsigns
Hi there, Am kind of asking a few things at once, all about that menu I can re post separately if is easier for you guys etc, all good either way But no in short, code from you guys to float right and indent right worked perfect, just some annoying bugs as usual with this kinda stuff I only recently got platform pro so am learning it's behaviours from you guys still but should be pretty good myself without asking all the time, am starting to get a good feel of it now bits that I need to fix.. / They are clickable to a degree, you cannot click the tab close to the top of it, only from the centre vertically downwards, ie if you imagined a cross hair with the centre at the centre of each nav tab. you can only click the tab from that centre downwards, and so is likely to be confusing or seem 'glitchy' to end users of the site What I think is happening is if you hit the top half of the tab, it 'catches' the header image as a link and just pushes you back to the home page which is obv not good! haha / The header image is meant to resemble a hanging shop front obviously and the nav/tabs are supposed to be like little wooden boards hanging down, the boards/nav tabs should appear to hang from behind the shop front, ie the blue/grey bit for the links should go up between the round creme and pink bits at the bottom of the virtual shop front as if they're hanging down from behind it. Where as at present there's a gap about 10px or so in the round arches of the edges of the hanging shop front. Changing the z-index so that they do sit behind the virtual cover made the links un-clickable all together. This could possibly be solved by making the nav tabs longer and lower with text sitting off the bottom of each nav tab. Could/should I either disable the header image from being a link back to home and float a div over the cupcakes with love round logo at the top left of the header. So that the virtual shop front is just a png with a higher z-index than the tabs so that the visible parts of the nav tabs are clickable. (As I presume the fact it's a link also is messing up the links as they are so close together?) This would then mean I would need to increase the height of the nav tabs from standard so that they appear to float behind the round edges of the virtual hanging shop front. Then set the text in each nav tab to be close to the bottom of each tab so they are not huge tabs with small text in the middle. Is this do able?? or what is cleanest approach? many kind thanks again

Share this post


Link to post
Share on other sites
kastelic
The only way i could think to fix this would be to seperate the shop front into 2 images, one of the pink and yellow striped area, and another image for the logo. That will allow you to crop the shop front image right up to the very bottom pixel of the pink and yellow. Then you can make the menu sit behind it with z-index and there will be no noticeable glitch. You just need to make the logo image positionr absolute, and a higher z-index than the shop front so you can float it over the shop front using left and top rules.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×