CSS Prevent navbar overlapping

Question

I have a problem. I am using the following code:

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

.fa-2x {
font-size: 2em;
}

.fas {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:#212121;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-size: 16px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
    position:relative;
    display:table-cell;
    width:60px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
}

.main-menu .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
    overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
    overflow-y:auto;
    overflow:visible;
}

a:hover,a:focus {
    text-decoration:none;
}

nav {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}

nav ul,nav li {
    outline:0;
    margin:0;
    padding:0;
}

.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
    color:#fff;
    background-color:#5fa2db;
}

.area {
    position: relative;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
}

@font-face {
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

<body>

    <div class="area">

        <div id="topBar">
            <select id="comboBoxAgent" onchange="changeAgent()"></select>
            <select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
                <option value="">-</option>
            </select>
            <select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
                <option value="">-</option>
            </select>
            <div id="toggleSwitch">
                <div class="radio-group">
                    <input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
                    <input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
                </div>
            </div>
            <div id="simulatorControls" style="display: none;">
                <input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
                <button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
                <label id="txtSimulatorProgress" class="simulator-progress"></label>
            </div>

            <button id="btnToggleAgent" onClick="toggleAgent()"></button>
        </div>

    </div>

    <nav class="main-menu">
        <ul>
            <li>
                <a href="index.php">
                    <i class="fas fa-home"></i>
                    <span class="nav-text">Dashboard</span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fas fa-undo"></i>
                    <span class="nav-text">Reset</span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fas fa-user-cog"></i>
                    <span class="nav-text">Admin panel</span>
                </a>
            </li>

        <ul class="logout">
            <li>
                <a href="logout.php">
                    <i class="fas fa-sign-out-alt"></i>
                    <span class="nav-text">
                        Logout
                    </span>
                </a>
            </li>  
        </ul>
    </nav>

    </body>

But as you can see, the navbar is now overlapping the content. I already tried setting the position of the area to relative, but that didn't do anything. CSS is not my favorite thing to do and I can't figure out how to set the content next to the navbar. What I want is that the navbar doesn't overlap the content when folded, but it can fold over the content, so when the navbar is small, all the content in the area is visible.

How can I achieve that?

Beauceron · Accepted Answer · 2021-05-26T20:41:59.203

0

Simply add a padding-left of the width of the menu to .area. i think you put 60px;

Add also box-sizing: border-box; to .area if the content move outside of the body on the right.

You should consider add box-sizing: border-box; to all your element like so :

* { box-sizing: border-box; }

Box-sizing property change the way the width and height of the element is calculated. Set to border-box state that the padding and border width will stay within the 100% width you set.

I will refer you to the w3school for more info : w3schools.com/cssref/css3_pr_box-sizing.asp

edited May 26 '21 at 20:41

answered May 25 '21 at 19:55

Beauceron

624
5
14

But I have a feeling that this isn't the cleanest solution. Also when I do that the content of my site goes out of screen on the right side – A. Vreeswijk May 25 '21 at 20:00
@A.Vreeswijk I updated my answer with the answer to the problem you tell me. – Beauceron May 25 '21 at 20:13
What does the box-sizing do? – A. Vreeswijk May 25 '21 at 22:05
@A.Vreeswijk box-sizing property change the way the width and height of the element is calculated. Set to border-box state that the padding and border width will stay within the 100% width you set. i will refer you to the w3school for more info : https://www.w3schools.com/cssref/css3_pr_box-sizing.asp – Beauceron May 26 '21 at 17:42

CSS Prevent navbar overlapping

1 Answers1