Jump to content

Archived

This topic is now archived and is closed to further replies.

sheilahoff

How to space text in navbar to fill width

Recommended Posts

sheilahoff

I'm working on a new DMS2 site and have been trying different ideas for how to achieve what we want. The dev site is at http://sheila.wpstagecoach.com/. I have a screen capture of what we're wanting the nav to look like here: http://www.hoffmangraphics.com/downloads/mock-up.jpg but it needs to be responsive to the assorted screen sizes. When I just use padding it causes text wrap pretty fast. Is it possible to make the space between nav items be a percentage? I currently have padding so it looks great on MY monitor. But it degrades poorly which is the issue.

 

I currently have 3 columns setup in the fixed header with a logo in the middle and then different navbars on each side, one called nav-left and one nav-right. I need to be able to make the menu text spread out evening on each side no matter how wide the viewport is (so responsive). I'm not a coder. Morris has been trying to help me (the 3 columns were his idea) and he says I need to use bootstrap pills which is like Greek to me!

 

I also need to know how to make it so when it goes to mobile mode it only displays ONE menu and not both!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
batman

Hi sheilahoff

I´m not sure but....Please, you can try this

.section-navbar .navbar .navline > li {
    padding-left: 4em;
}
 
The bootstrap pills for me is more difficult than the "Davinci Code"
:)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sheilahoff

LOL...I haven't even tried the pills approach yet but DaVinci Code made me laugh!

 

Your CSS and what I used   padding: 0 3em; both look great when the monitor is 20+" But when you go down to a 15" monitor using Screenfly to test then they wrap. That's what I'm trying to learn how to avoid. Thanks for trying though!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
batman
 
I like to made you laugh ! !
All in the internet is like the "Davinci Code" for me.
:D
A silly sugestions.
If you use 7 columns with the words linked to this....This is not profesional but.....
I believe that I need a coffee now and take me mac before this reply
:fpc:

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sheilahoff

Hmm....yes...silly...it could work but it would be messy. I'd have to make it 6 nav bars of one item each. I could try just using text but then it seems like it would not display as nav does. Linked text will show as visited text which is not desired for navigation. See what I mean? Otherwise I could try just using a plain text box on each side of the logo and tell it to use full justification. Maybe I should try that. I'm not sure how I'd deal with the visited text though. I suppose I could just make visited the same color as active. I'll  keep you posted.

 

The other issue with my current approach and this new option is how and WHAT displays as a menu when on a narrow device like a phone. Right now I get TWO menus. If we switch to text it won't know to display a menu at all I think. I'm guessing there's a BETTER way to handle this. Hopefully some others will also chime in.

 

PS: Just tried the text approach and it didn't justify and created all the same issues as with the way I was already doing it. So that's a no-go.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

For me, you're best of using one menu and using one of the menu items to display your logo image.

 

Follow my instructions on here and it should be close to something like you want to achieve - http://forum.pagelines.com/topic/32656-centering-fixed-navbar-logo-and-menu-also-resizing-logo/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

Danny...THANK YOU! This was VERY helpful. I'm getting very close now. I'm pretty happy with how it looks now but have a few questions/tweaks.

 

With 3em padding it looks the way we want on larger screens. If I lower the padding the logo also gets smaller.

I'm new to doing media css. What I tried is this:

@media (max-width: 768px) {
.pl-section-pad {
   padding: 0px; 
  }
}

@media (max-width: 1024px) {
.pl-section-pad {
   padding: 1em; 
  }
}

So is there a better way to make it stretch the full width but then be responsive to narrower screens so it doesn't wrap? It starts to wrap at about 1527px right now.

 

Is there a way to make the background logo a clickable link to homepage?

 

Why do I still see the mobile menu displayed twice instead of once. I only see one menu icon but inside that icon the list is there twice. Odd?

 

THANKS!

Sheila

 

PS: I'm just re-reading your tutorial on this. Now I'm thinking maybe I did the logo wrong. Was I supposed to add it in the menu itself then target it? I added a blank menu item. Not sure if it matters but maybe that's why I don't have a link to the image?


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
GetMeWebDesign

Great answer from Danny... should have thought of that... derrrrr. I will try and replicate, as I know what you are trying to acheive and work with your @media... there should be ranges defined ie as given here (highlighted red):

 

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

 

 

  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Yeah, I indicated in that post some additional styling is required and as mentioned in the post above, you need to use media queries to resolve the padding issue on mobile devices.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Hi Danny, hoping this is all now cracked... screenfly to the rescue and media enquiries sorted (I hope...Sheila?)


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
sheilahoff

I just wanted to close the loop on this and say I owe a HUGE debt of gratitude to Morris, better known here as GetMeWebDesign. He helped me get the navbar working with multiple custom media CSS. The site is still in the works awaiting a photo and video shoot. But is now being staged at http://www.stacey.hoffmangraphics.com. THANKS!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
GetMeWebDesign

No problem. The site looks great and so much better than its previous incarnation. You have put DMS to good effect


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

×