• 0

Navigation bar text sizing problems


Question

Posted · Report post

I am having major issues getting the text size to look good across multiple platforms.  Either it looks good on the website, and to large on the tablet; looks good on the tablet, text is really tiny on the phone, etc.  Please help!!!

Below is the code that i've found that controls the size located in the custom css section of pagelines.  The site is porterteam.org

 

 

.navbar .navline > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
float: none;
display: block;
padding: 5px;
line-height: 80px;
color: #fff;
color: rgba(255,255,255,0.9);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-transform: uppercase;
font-size: 30px; font-size: .9rem; 
}

Share this post


Link to post
Share on other sites

26 answers to this question

  • 0

Posted · Report post

Hi dloux

 

I dont understand this code

 

font-size: 30px; font-size: .9rem; 

 

Please, you can change it

font-size: 30px;

or better 

font-size: .9rem; 

only one or another 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks batman for your willingness to help me out, and great job cleaning up the streets of Gotham. :)  I did what you asked and changed it to just .9rem and these are the results I found this so far. 

 

font-size: .9rem; Looks great on the ipad (horizontal mode) but everywhere else (web pages and phones) is very small (you can check it out now at porterteam.org) 

 

font-size: 1.2rem; is is perfect on web pages and phones, but is too large on ipads (bumps the text down below the bar in the white space)

 

My question is from this designer (not a programer at all) is there not a way to make the text adaptive to the width of the site?  It seems like a simple concept to me but maybe there is more to it than that. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, usually I'd use em for responsive text sizing. Check out http://www.webdesignerdepot.com/2012/10/a-simple-guide-to-responsive-typography/ which shows the @media code you can use to resize between the browser sizes using rem.

 

I've not used rem before personally but reading that thread it seems that it applies to the default font size on the device, so maybe try em instead first and see if that gives you a better result before making the @media changes.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry, I'm not very smart when it comes to this programing stuff :) a true designer here :| I started reading and got halfway through the first paragraph and was just looking at the screen with a blank look on my face and even less in my head. Is there something I can try as an example? Is what I'm asking this unheard of? Seems a simple concept in my mind anyways.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@media queries allow you to basically add styling for specific conditions, such as when your screen is a specific width.

 

So what you can do is prefix your code you included in your first with the @media query for different screen widths.

 

For example:

 

@media (max-width: 480px) {
  .navbar .navline > li > a {
    line-height: 80px;
    font-size: 30px; font-size: .9rem; 
  }
}

 

The above would be used for mobile devices such as iPhones, you will want to reduce the font size and line-height. You can then do the same for different device widths, for more information, I recommend you read the following:

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny  I tried replacing the navbar code I posted earlier with the code you suggested and it made everything tiny (across all devices) and pushed it up at the top touching the back bar.   Am I missing something?  I even tried to adjust some of the values in the suggested code and it did not change the size or anything for that matter.  This should not be hard to do correct?  Has html coding really not came very far since the last time I took a class with it in 1998? :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

If you're seeing changes in the screen after adding the code it could be some code above in the css panel isn't correct, if there's anything broken or not closed in the css above it will stop the below being read.

 

I've just tested the code below for changing the font-size based on the width of the screen using @media. See the screencast below to see the changes, it's a bit dramatic as it's set to 40px but you'll see where it changes.

 

http://screencast.com/t/b9PqT2LeCYu

 

@media (max-width: 900px) {
  .navbar .navline > li > a {
    font-size: 40px;
  }
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I see how that works for you, but it's not working for me at all.  When In replace the code that you gave me it acts exactly like the original code. There is no resizing going on at all.  Am I missing something? Is there someplace else besides custom CSS that options for the nav bar text size is hiding?  I can't be the only one that ran into this.  It's just weird. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please provide the code you have used, as the code from my previous post required you to change the font size which I mentioned. If the font size is effecting all screen sizes then you have something causing an issue, as my code shouldn't be doing what you're saying it is.

 

Here is working example for the Masthead, view the code which I have highlighted and you can see that for each media query, the masthead title font size either increases or decreases based on the screen width.

https://github.com/pagelines/dms-bootstrap/blob/master/sections/masthead/style.less#L106-L161

 

This is exactly what you need to do yourself for your Navbar.

Please be aware that we do not provide extensive CSS support, I recommend you signup to a CSS specific forum and ask your CSS questions there.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I guess i'm still confused here, where do I put the highlighted code  at?  I replaced the font size part with the code you suggested and it made the navbar text a bit smaller but that's about it, it was static.  Below is my custom CSS code i've been editing.  There is more code in the custom css section but this is what is effecting the size of the nav font size.  

Note: when I remove this out of the custom CSS it changes the text to a very basic 12pt font with no formatting, so I know this is the part that's affecting the size.  It's been over a week now and i've made no progress what's so ever.  

 

.navbar .navline > li > a {

text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
float: none;
display: block;
padding: 5px;
line-height: 80px;
color: #fff;
color: rgba(255,255,255,0.9);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-transform: uppercase;
font-size: .9rem; 
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, the highlighted code needs to be edited to suit the font size you're looking for and then pasted into your custom css panel.

 

The code you put in here overrides the core css - http://screencast.com/t/fdWG5Thz

 

If you have other css in there relating to the font size for the nav you'll need to remove this first and replace it with the new code, otherwise one will be overriding the other.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still the same outcome, I believe there is something in there someplace that i'm not seeing.  Here tell me this if this will be eiser, because this is the ONLY thing i'm having an issue with and the site is done.  I'm going to paste the entire custom css code below, if one if you could fix whatever it is and post it for me to try, so I can be done with this.  Let me know if that will work. 

 

http://forum.pagelines.com/pst/p/28-mm94ld/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there

I´m not sure but you can verify things like this, for example 

http://screencast.com/t/1qDmnkKu

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

sorry, I don't understand

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi again..

 

I believe that the correct code is 

 

.plbrand  { margin:0px 2% 0 0; }

 

for example, but I can be wrong

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK so - you need to take the whole CSS you pasted in the reply above (i removed all this and added to the paste functionality and then pasted the link) go to http://jigsaw.w3.org/css-validator/ and paste in the code in its entirety - the validator will tell you where the issues are. 

 

This is basically what batman did above for you. if you open { you need to close it 

 

the validator will point out this and other errors you have made in the code. Follow the steps provided by the validator to fix this. 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello batman I tried replacing the code "font-size: .9rem;" with the one you provided and it did just like the other times where it made it about 75% of it's current size and did not resize on any devices.  As for the validator thing, I did as you said and it pulled up like 30 pages of code that to me it might as well been in japanese.

 

i'm just a designer trying to edit content on a already built site, this was a simple (i thought) problem that the owner of the site pointed out. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Did the validator point out any errors in red? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

there are 592 possible problems with your CSS. http://screencast.com/t/xFm0zoRyijC

 

one problem with your css will stop other CSS from working. 

 

As ideal as it might not be for you you will have to correct those errors in your CSS for any other CSS you add to work. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand, I had no idea there was this many problems with the site when I took it over.  The problem is i'm no programer, so don't even know where to start or even how to correct one.  Looks like they are out of luck on fixing this problem. 

 

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

to fix the issues you would have to fix all those errors. maybe they would pay you to fix them.. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Or someone else for that matter.  i'm not programer, just a mere designer.  :) 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ah i see what you mean. :) 

 

If you ask the client to email our support desk on hello at PageLines dot com we will be able to give them a list of developers who are available to accept work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the info, i'll let them know! 

thank you all! 

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