Jump to content


Photo
- - - - -

navigation tips


  • Please log in to reply
9 replies to this topic

#1 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 18 May 2012 - 04:04 PM

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... Posted Image

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!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 May 2012 - 04:10 PM

To get rid of that line, please add this to Custom Code > Custom CSS:

Please Login or Register to see this Hidden Content



#3 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 18 May 2012 - 05:34 PM

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:

Please Login or Register to see this Hidden Content

is that what's making it wonky?

#4 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 18 May 2012 - 05:49 PM

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

Please Login or Register to see this Hidden Content

thanks so much!! tan

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2012 - 06:31 PM

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:

Please Login or Register to see this Hidden Content

changed to

Please Login or Register to see this Hidden Content

changed the dynamic appearance totally.

#6 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 18 May 2012 - 08:43 PM

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?

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2012 - 09:00 PM

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.

Please Login or Register to see this Hidden Content



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 width: 250px; 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.

#8 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 18 May 2012 - 09:35 PM

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

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2012 - 10:25 PM

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.

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content


Let me know if this works for you.

#10 tandan

tandan

    Super Member

  • Members


  • 152 posts
  • LocationNew York
  • Country: Country Flag

Posted 20 May 2012 - 09:42 PM

@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

Please Login or Register to see this Hidden Content

> http://www.pagelines.com/forum/discussion/12193/please-read-before-posting#Item_9 states that:

Clicking "reject" on an answer tells the moderators that the answer provided did not solve your problem and you still need help.


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!!