Mark Laurence Posted March 25, 2017 Share Posted March 25, 2017 I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll. Specific page is here and I'm referring to the three sidebar nav menus on the left. #mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c; Any help would be beyond amazing. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 25, 2017 Share Posted March 25, 2017 I don't exactly get what you mean? there is a unit vh and vw which relate to percentage of viewport/browser window area of device used Link to comment Share on other sites More sharing options...
Mark Laurence Posted March 27, 2017 Author Share Posted March 27, 2017 So, when the window size is reduced on that page (now moved here), those three menu bars on the right remain the same size and overtake the content area. I'm trying to make it so they change in correlation to the size of the content area. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 27, 2017 Share Posted March 27, 2017 ???? Three bars on left, three bars on right, you usually use media queries to change content container size, depending on device width, and therefore you can do the same with the three bars if that is what you want. Again vh, vw with min-width to make elements proportionately same width depending on device width. You need to adjust footer z-index, as it overlaps the bottom bar. 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