Jump to content
Sign in to follow this  
tandan

navigation tips

Recommended Posts

tandan    0
tandan

Hi there! I'm hoping someone can help with this...I have created an image with the questions I have so it's easier to explain... 9JUKq.gif In summary: 1) There's a line appearing below the navigation which i can??™t find with firebug to remove. 2) it also seems to have a hidden navigation underneath but i??™ve removed "secondary navigation" already... so I'm not sure what this is and how to remove. 3) navigation formatting- I used simple css lite plugin to format the navigation. I don't know why the alignment (?) is off on it....maybe it's related to the issues above? If anyone could help me, that would be great! thanks!

Share this post


Link to post
Share on other sites
catrina    103
catrina
To get rid of that line, please add this to Custom Code > Custom CSS: [code]div.navigation_wrap.fix {border: none;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tandan    0
tandan
hi catrina! thanks for that! that removed the line issue i was having... but i'm not sure what to do about the weird formatting issues with the dropdown. I wanted a larger font and a text transform to uppercase so i did: [code].main-nav li a { top: -30px; font-size: medium; text-transform: uppercase; }[/code] is that what's making it wonky?

Share this post


Link to post
Share on other sites
tandan    0
tandan
UPDATE: it IS what is making it a bit wonky...i removed the above code temporarily and it looks fine again--but then how do I get the text to be A) larger and B) uppercase C) moved up so that it is where it needs to be (closer to branding)? The boxes behind the text don't seem to resize to fit the text... Does anyone have any ideas? Also, do you know what the selector is for the text when it's on the blue background in the hover state? Right now the text can't be read in the drop down because it's the same color as the main nav text... http://familydanz.mpwclient.com/ thanks so much!! tan

Share this post


Link to post
Share on other sites
Rob    547
Rob
Tan, it appears to be in the submenu padding. Additionally, because the font size is rather large, the labels wrap. Your color scheme is actually showing the drop down lists with matching blue text to blue background, so you don't see it. On hover, the padding expands each submenu item, causing the irregular stretching of the item. The irregularity of the lines between each submenu item stems from the fact that the text wraps. So, if the text is short, it's on one line; long and it may be on 3, so the divider line between the submenu items is spaced accordingly. For example: [code]ul.sf-menu ul li a { padding: 8px 15px 9px; }[/code] changed to [code]ul.sf-menu ul li a { padding: 3px 5px 4px; }[/code] changed the dynamic appearance totally.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tandan    0
tandan
Hi Rangelone, Indeed it did! Thanks for the help. :) Is there any way to then adjust the width of the background so that the text doesn't wrap then? also it seems that when i use the: .main-nav li a { top: -30px; } that's what creates this weird blue extra box at the bottom--not sure why. it goes away when i take that away... problem is that i need to move the navigation up -30px so how would i be able to do that?

Share this post


Link to post
Share on other sites
Rob    547
Rob
Tan, I don't recommend using negative numbers in CSS unless absolutely necessary. Not all browsers work well with them and you could open a can of worms doing that. There's doubtlessly a way to move the navigation up using CSS but you need to start using Firebug for these solutions. http://www.getfirebug.com As for widening the background, no. Widening the drop down, yes. But the easier, simpler, better solution is to use a different font. Since the GoogleFonts plugin is free, I'd suggest using that with the Cuprum * G font (which is narrow, small and clean). There are hundreds of others equally neat and small enough to fit. If you insist on setting the width of the subnav, you simply have to identify the element and add something like [b]width: 250px;[/b] however, that will ruin responsiveness for mobile viewing, where the font won't. On a side note, rejecting answers is only supposed to be used when the reply is absolutely wrong. We reply to all open topics, so rejecting answers doesn't ensure faster replies or that we'll reply in any order or precedence. All topics are answered as quick as possible by myself and all my colleagues. Please refrain from rejecting replies, particularly if the answer is correct.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tandan    0
tandan
@rangelone , thanks for the tips! i had NO IDEA we weren't supposed to reject the answers...i thought that was to notify that it was still open. is there a forum etiquette post somewhere? I wish there was a first steps or something for newbies...emailed directly to us when we buy the framework. that would help a lot. there's that annoying pop up that says "click accept or reject beside an answer" so that implies that you SHOULD pick one. I feel horrible thinking that people think i'm "rejecting" their answer. thanks sooo much for letting me know! i always say thanks first of course! :) anyway, i DO use firebug to figure out what selector to use the negative number in CSS with... there is nothing that really tells us that we shouldn't do that and until you told me, I had seen it being used elsewhere when i firebug other people's sites and had someone else help me and did the same kind of thing--though not with pagelines... the problem with the navigation is that it is below the branding and i don't see how i can do it otherwise without using a negative number to move it up... sigh...

Share this post


Link to post
Share on other sites
Rob    547
Rob
Tan, we don't like sighs around here, only smiles. Don't worry about the rejects. We don't take it personally, so don't worry. I just wanted you to know about it and we deeply appreciate the "thanks" you always offer. In your image one of the first questions was about the formatting, where the subnav was bleeding into the nav. Part of that, I think had to do with the actual padding of the branding area. I tried this and it seems to work. [code]#branding .content-pad { padding-bottom: 27px; padding-top: 25px; }[/code] The original bottom padding is 25px, but the extra 2px to 27 moves the menu down and keeps it in line with the rest of the background. Now, about the wrap... and the width of the subnav, try this: [code]ul.sf-menu ul li a { padding: 8px; width: 150%; }[/code] Let me know if this works for you.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tandan    0
tandan
@rangelone, thanks so much for your help! I'm going to go try it all out and let you know if it doesn't work... just to let you know because it's confusing for first timers, the "read this first" here that appears before you post anything to the forum [url] http://www.pagelines.com/forum/discussion/12193/please-read-before-posting#Item_9[/url] states that: [quote]Clicking "reject" on an answer tells the moderators that the answer provided did not solve your problem and you still need help.[/quote] If this isn't correct, I think it should be changed so people don't inadvertently offend any of the awesome support staff! :) thank you thank you!!

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  

×