0

I am using the W3CSS stylesheet in a page to display a menu using ul lists. It works fine but it switches to the minimal style way too soon for my needs.

There are 3 media queries involved in this at lines 158, 159 and 160 that change when the viewport size is equal or less than 600px:

@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}} 
@media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}    
@media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}}

I want it to switch at 350px but I'd like to avoid editing the w3.css file every time I need to apply any modification, also because I'm using the file in other pages as well and I need the default behavior there.

Is there any way to mute the w3.css media queries from any CSS of mine? Javascript-based solutions are accepted, but if possible I want to avoid these.

Thank you very much in advance

EDIT

I'm not sure I was clear enough in my request, so I'll try to redefine it here.

I want to mute those media queries from the w3.css file, so I can override them in my CSS files using max-width: 350px instead of 600px.

T3STY
  • 103
  • 7

2 Answers2

0

What you can do is create a custom.css stylesheet and load that last in your header area. This will in turn load your css style sheet as the override.

norcal johnny
  • 2,050
  • 2
  • 13
  • 17
  • Already tried doing this. However, placing the max-width: 350px media query in any stylesheet, before or after the w3.css stylesheet, has no effect since it's not overriding the behavior between 350px and 600px. So as long as the 600px queries are alive, they will keep switching at 600px, no matter what. – T3STY Oct 31 '16 at 02:38
  • Do you have some code you can post? Maybe a jfiddle.. This way we can see what you have and possibly just create a new class for the said item and write the media based on that class or ID. – norcal johnny Oct 31 '16 at 02:41
  • For instance you can copy the .w3-topnav class in your css and then rename to something like .w3-topnav1, then create the @media for that class. – norcal johnny Oct 31 '16 at 02:45
  • Unfortunately I am unable to show you a jfiddle example, the w3css won't load over http (jfiddle needs https or it won't load). But I can let you have a look at the Try it editor in the W3Schools example: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar Also here you can find the w3.css stylesheet: http://www.w3schools.com/lib/w3.css My code is just the same as the ul there. I do have an id for the ul. But trying to figure out everything inside the w3.css stylesheet would really take some time, and might not be worth it if I'll need many more modifications. – T3STY Oct 31 '16 at 02:51
0

After looking in the various styles applied to elements, and isolating the .w3-navbar class related styling, I have been able to modify the behavior to match my needs without modifying the original w3.css stylesheet.

First, I have reverted the styles for the media query at 600px:

@media screen and (max-width:600px){
    /* reverting the effects of the original @media query */

    .w3-navbar li:not(.w3-opennav){float:left; width: initial!important}
    .w3-navbar li.w3-right{float: right !important;}
    .w3-navbar .w3-dropdown-click .w3-dropdown-content,
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:static}
    .w3-navbar{text-align:initial}
}

Then I have added the original w3.css styles to a media query at 350px:

@media screen and (max-width:350px){
    /* these styles are the same as the ones in the original w3.css stylesheet,
       in @media screen and (max-width: 600px), lines 158 to 160 */

    .w3-navbar li:not(.w3-opennav){float: none; width: 100%!important}
    .w3-navbar li.w3-right{float: none !important;}
    .w3-navbar .w3-dropdown-click .w3-dropdown-content,
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}
    .w3-navbar{text-align:center}
}

The style above needs to be placed in a custom stylesheet loaded after the w3.css stylesheet.

This is not a quick solution, involves a lot of research on the original stylesheet. In my case there were 200 lines, or so, and was an almost-easy task.

For larger stylesheets I highly recommend writing your own styles, it will take you less time and you'll know what's happening.

T3STY
  • 103
  • 7