Change CSS applied to nav menu items using Javascript

Question

I have 4 page links in my nav bar. I want to resize them when using mobile browsers.

This is my JS to detect mobile: function detectmob() {

 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    alert('This be a mobile browser');
    style3(); //a function which applies other CSS changes to my page
    //Trying to figure out how I'd change the width of my a elements within my nav to 100% width 

  }
}

CSS:

#topnav ul li a {
    width: 175px; //I'd like to change this to 100% using JS based on above condition
    height: 40px;
    line-height: 53px;
    border-bottom: 4px solid #636393;
    padding:0px;
    color: #fff;
    font-size:18px;
    font-weight:lighter;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .1s all linear;
    -moz-transition: .1s all linear;
    transition: .1s all linear;
}

HTML:

<nav id="topnav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="video.html">Trailers</a></li>
        <li id='adminPage'><a href="admin.html">Admin</a></li>
    </ul>
</nav>

This is what I have tried inside detectmob() if true:

navItems = document.getElementsByTagName('a');

 for(var i =0; i < navItems.length;++1){
navItems[1].style.width = "100%"; 
    }

but i got error: Uncaught ReferenceError: Invalid left-hand side expression in prefix operation

Wouldn't this be considered platform detection? I don't care about the browser. I just want to make certain changes if it's not a desktop/laptop — Batman
– Batman, Commented Apr 3, 2013 at 17:47
@Batman, you really don't. Imagine you walk into a restaurant and you see another customer order a steak. You decide to order a steak too. When the steak comes, the other customer has mashed potatoes on the side and A1 sauce, yours, however is just a steak with no extras. When you ask the waiter why, he replies that it's because you entered from the side door, rather than the front door. Although this example is a bit extreme, it's exactly what developers do to users when they try to change how a website reacts based on the device a user uses. — zzzzBov
– zzzzBov, Commented Apr 3, 2013 at 18:10

dsdev · Accepted Answer · 2013-04-03 17:30:02Z

5

You should just use media queries right in your css to adjust based on browser size. For example, the following CSS would be used when the browser is less than 500px:

@media screen and (max-width : 500px) {
    /* Styles for less than 500px */
}

answered Apr 3, 2013 at 17:30

dsdev

1,1246 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Batman Over a year ago

My issue with media queries is that i don't want to get into the guessing game with different devices, screen resolutions and whatnot. I want a solution that's going to apply to all mobile devices. Plus since i already have a condition to call function style3, I may as well make other css changes within that one function and keep it all in the same place.....or am I completely wrong here?

dsdev Over a year ago

Browser detection is generally seen as bad practice. It seems to me that it's a bigger guessing game to try and detect every mobile device (present and future)! You also may run into issues with some devices not having JS enabled.

Batman Over a year ago

Okay I'll try media queries than. Can you explain what @media screen is? Or is the whole thing saying apply these styles if the screen is small than 500px?

dsdev Over a year ago

Correct, the whole thing is saying to apply the styles. Those styles will override your existing styles (put it at the end of your stylesheet). @media screen means that you're targeting the screen. There are other medias that you can target (tv, print, etc), but this is the one you want for your purposes. Here's a link to the MDN where Media Queries are explained.

Batman Over a year ago

How do you know if 500px is enough. What about screens with high resolutions or those with really low resolution. Is 500px just a random number you picks or like an average standard that applies to must devices?

|

BentOnCoding · Accepted Answer · 2013-04-03 17:29:58Z

3

Using media queries allows you to define styles in your css based on the device currently using your site.

I think media queries are a much better way to achieve the responsive layout you seek :

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

answered Apr 3, 2013 at 17:29

BentOnCoding

28.3k14 gold badges68 silver badges93 bronze badges

Comments

inorganik · Accepted Answer · 2013-04-03 17:30:25Z

3

Use media queries instead. CSS:

@media all and (max-width: 320px) {

    #topnav ul li a {
        width:100%;
    }

}

answered Apr 3, 2013 at 17:30

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

Collectives™ on Stack Overflow

Change CSS applied to nav menu items using Javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related