Jump to content

Changing Object Size in Relation to Window

Recommended Posts

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 post
Share on other sites

???? 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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...