Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Keeping nav bar on one line

    Two questions.

    1. How would I adjust this css to make sure my nav bar stays on one row. For instance....on the iPad (in portrait mode), there isn't enough room for all of the nav bar, so it takes up two rows.

    2. For some reason, if I adjust my browser to half screen, the blue background of the navbar changes to a greyish color that I'm using for the page's background. Any idea what's causing this? Thanks.


    Code:
    @media screen and (min-width: 768px) {
    
    .navbar {
        background-color: #2749aa; /* Old browsers */
        background-color: #2749aa\9; /* IE8 and below */
        background-repeat: repeat-x; /* Repeat the gradient */
        background-image: -moz-linear-gradient(top, #547ef8 0%, #2749aa 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#547ef8), color-stop(100%,#2749aa)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Chrome 10+,Safari 5.1+ */
        background-image: -ms-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* IE10+ */
        background-image: -o-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Opera 11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#547ef8', endColorstr='#2749aa',GradientType=0 ); /* IE6-9 */
        background-image: linear-gradient(top, #547ef8 0%,#2749aa 100%); /* W3C */
        border: 1px solid #3a3a3a;
      -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
        }
    
    
    .navbar li a {
        background-color: #2749aa; /* Old browsers */
        background-color: #2749aa\9; /* IE8 and below */
        background-repeat: repeat-x; /* Repeat the gradient */
        background-image: -moz-linear-gradient(top, #547ef8 0%, #2749aa 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#547ef8), color-stop(100%,#2749aa)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Chrome 10+,Safari 5.1+ */
        background-image: -ms-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* IE10+ */
        background-image: -o-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Opera 11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#547ef8', endColorstr='#2749aa',GradientType=0 ); /* IE6-9 */
        background-image: linear-gradient(top, #547ef8 0%,#2749aa 100%); /* W3C */
        color: #FFFFFF;
        font-size: 12px;
    }
    
    
    .navbar li a:hover {
        background: #FFF;
        color: #000;
        
    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    1. Try white-space: nowrap;
    2. Hard to tell without seeing.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •