Jump to content

Changing Object Size in Relation to Window


Mark Laurence

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...