Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Better way to scale than vw

Edrol97

Bronze Coder
Hi all, I've added vw into my css for various elements. I'm confused about how to style and scale the navigationbar. How do I change the font size within the various navigation bars I have? Example of what I have tried unsuccessfully below. Thanks.


CSS:
#sunnavigationbar {
  background-color: #ec1801;
  padding: 20px 20px;
  font-family: "Eliot Lord";
}

#sunnavigationbar a {
  font-family: "Eliot Lord";
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 2vw;
}
 
Last edited:
That seems like it should work. Suppose there is anything overriding? I normally use px; rem; but vw (viewport width) should work. Have you set viewport width to all screen with a meta tag? X E.
 
Hi all, I've added vw into my css for various elements. I'm confused about how to style and scale the navigationbar. How do I change the font size within the various navigation bars I have? Example of what I have tried unsuccessfully below. Thanks.


CSS:
#sunnavigationbar {
  background-color: #ec1801;
  padding: 20px 20px;
  font-family: "Eliot Lord";
}

#sunnavigationbar a {
  font-family: "Eliot Lord";
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 2vw;
}

I use this tool frequently:


After putting in the parameters you want, it will create a font-size declaration that will scale fonts but with a min and max size so the font size won't get too small or too large.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom