JohnDahl Posted August 27, 2018 Share Posted August 27, 2018 I have been debating whether to use a canned framework or not (versus raw css) and am still on the fence. Twitter bootstrap seemed bloated to me when I tried it, so today I played around with w3's framework. It's nice, but I feel like I have ZERO control (or at least I can't control it....). The example framework I kicked around a while is this one: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio&stacked=h The thing I HATE is how the side menu pops up automatically when the window is enlarged. So I just spent literally two hours trying to figure out how to keep this from happening, and failed. Viewing the source in firefox (via F12) I can see the container change with a "before" keyword popping up, but HOW? Is there a way to change this behavior? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2018 Share Posted August 27, 2018 You can customize bootstraps css, components, JavaScript to your requirements. You select what you want and it makes sure js css dependences are downloaded together, i haven't tried it personally, but i knew that option is available. Link to comment Share on other sites More sharing options...
JohnDahl Posted August 28, 2018 Author Share Posted August 28, 2018 Yup, that's what I'm trying to do, and failing (hence the question). How do I keep the sidebar from automatically popping up on larger screens? https://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm# Link to comment Share on other sites More sharing options...
JohnDahl Posted August 28, 2018 Author Share Posted August 28, 2018 I figured out the problem. After fighting through html, css, SQL and php tutorials, manuals, etc. I lost patience (sometimes this learning curve feels never-ending). Today I going through the ws.css reference a little at a time, studying examples. I still don't know why that sidebar pops out, but right now I don't care. That comes later. Link to comment Share on other sites More sharing options...
Funce Posted August 29, 2018 Share Posted August 29, 2018 (edited) Have you had a look at Media Queries? I had a look on the website you linked, and if you investigate the styling on THIS element <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"> You'll find a media query that controls the sidebar. Having my screen maximised shows this style currently active upon it. @media (min-width: 993px) .w3-sidebar.w3-collapse { display: block!important; } This shows it from its hidden state, if the screen has a width of 993px or more. When I reduced the screen size, the active CSS changed to this instead. @media (max-width: 992px) .w3-sidebar.w3-collapse { display: none; } This hides the sidebar should the screen be less than 992px wide. I'm not brushed up on the :before and :after elements, so I wouldn't be able to answer that. If you wished to look at these styles in the source: w3.css, Line 793 w3.css, Line 805. If you look around for these things in particular, you'll find a lot of other things are controlled by the screen size too Feel free to ask any further questions. Edited August 29, 2018 by Funce Link to comment Share on other sites More sharing options...
JohnDahl Posted August 31, 2018 Author Share Posted August 31, 2018 On 8/29/2018 at 3:54 AM, Funce said: Have you had a look at Media Queries? I had a look on the website you linked, and if you investigate the styling on THIS element <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"> You'll find a media query that controls the sidebar. Having my screen maximised shows this style currently active upon it. @media (min-width: 993px) .w3-sidebar.w3-collapse { display: block!important; } This shows it from its hidden state, if the screen has a width of 993px or more. When I reduced the screen size, the active CSS changed to this instead. @media (max-width: 992px) .w3-sidebar.w3-collapse { display: none; } This hides the sidebar should the screen be less than 992px wide. I'm not brushed up on the :before and :after elements, so I wouldn't be able to answer that. If you wished to look at these styles in the source: w3.css, Line 793 w3.css, Line 805. If you look around for these things in particular, you'll find a lot of other things are controlled by the screen size too Feel free to ask any further questions. I could not figure out SPECIFICALLY what was causing the menu to auto-popup - I know a media query is what is generally doing it, but since I am not very good with media queries I could not figure out exactly what is causing the action - such that I could delete the offending css property to stop the behavior. In the meantime I moved on and am approaching this from another angle: slowly and methodically. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2018 Share Posted August 31, 2018 IF you mean the menu auto-popup as in animates from left it is caused by this line .w3-animate-left { animation: 0.4s ease 0s normal none 1 running animateleft; position: relative; } To disable that use #mySidebar.w3-animate-left { animation: none; } in a custom css file, that is linked to under the w3css css link The ID #mySidebar will make sure it does not affect any other left animation elements using this class and most importantly being below w3css it will override the animation styling used by w3css file. Link to comment Share on other sites More sharing options...
JohnDahl Posted August 31, 2018 Author Share Posted August 31, 2018 thanks, @dsonesuk, that works! I have been messing around with responsive design using w3's framework for the last few hours. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now