Search code examples
htmlcssnavigationnav

HTML - CSS | Have a fixed vertical menu AND a fixed horizontal menu at the same time

I'm working on a website and CSS is giving hell of a headache ... What I currently want is a top horizontal fixed navbar and a left vertical fixed navbar at the same time. I want the vertical one to be just below the horizontal. I have this :

@charset "UTF-8";

/* Général ------------------------------------------------------------------------------------- */
body, p, legend, label, input {
    font: normal 8pt verdana, helvetica, sans-serif;
}

html{
	color:white;
	width:100%;
	height:100%;
	background-image: linear-gradient(to bottom, #151515, #202020);
	background-repeat: no-repeat;
}

a{
	font-style: none;
}
/* Forms --------------------------------------------------------------------------------------- */
fieldset {
    padding: 15px;
    padding-bottom:8px;
    border: 2px #0568CD outset;
    border-radius: 2em;
    margin: 15px;
}

fieldset>strong {
	margin-right: 5px;
}

legend {
    font-weight: bold;
    color: #0568CD;
    font-size: 9pt;
}

form label {
    float: left;
    width: 200px;
    margin: 3px 0px 0px 0px;
    font-weight: bold;
    font-size: 7pt;
}

form input {
    margin: 3px 3px 0px 0px;
    border: 1px rgb(100,100,100,0.7) solid;
    border-radius: 0.5em;
    padding: 3px;
    padding-left: 10px;
}

form input.sansLabel {
    margin-left: 150px;
}

/* Styles et couleurs -------------------------------------------------------------------------- */
.required {
    color: #c00;
}

.error {
    color: #900;
}

.success {
    color: #090;
}

.info {
    font-style: italic;
    color: #E8A22B;
}

.ADMIN {
	color: #ea0000;
	margin: 5px;
}

.OTHER {
	color: #00bf00;
	margin: 5px;
}

/* bouttons ----------------------------------------------------------------*/
.Button{
	padding:0.3em 1.2em;
	margin:0 0.1em 0.1em 0;
	border:0.16em solid rgba(0,0,0,0.25);
	border-radius:2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	text-align:center;
	transition: all 0.2s;
}
.Button:hover{
	border-color: rgba(10,10,10,0.6);
	border-right-width: 0.4em;
	border-style: outset;
}

/* NAVBAR  --------------------------------------------------------------------------------------- */
div#nav{
}

nav#navbarH{
	display:block;	
	background-color: #333;
	font-size: 30;
	top: 0;
	left: 0;
	width: 100%;
	position:fixed;
	text-align: center;
}

nav#navbarV{
	display:inline-block;
	float:none;	
	background-color: #808000;
	font-size: 30;
	left: 0;
	height:100%;
	position:fixed;
	width:15%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.left{float:left;}

.right{float:right;}

li {
  float: left;
  font-size: 30;
}

li.active{
  background-color: #4CAF50;
  font-weight: bold;
}

.left>li.active , .left li.navBtn.active>a:active{
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 0.5em;
}

.right>li.active , .right li.navBtn.active>a:active{
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 0.5em;
}

li a,li.dropdown a.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30;
}

li:not(.active)>a:hover, .dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #202020;
  text-align: center;
}

.dropdown-content a {
  position: relative;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: #214b23;}

.dropdown-content a:active {background-color: #3e8e42;}

.dropdown:hover,.dropdown:hover>a.dropbtn{
	position:relative;
	width:auto;
}

.dropdown:hover .dropdown-content {
	display: block;
	float: none;
	position:absolute;
	width:auto;
}

.dropdown:hover .dropbtn:active {background-color: #4CAF50;}

li.navBtn>a:active {background-color: #4CAF50;}

li.navBtn.active>a:active{background-color: #18e2a0;}

@media screen and (max-width: 400px) {
  nav#navbarH{float:none;display:inline-block;}
  ul{float:none;display:block;width:100%;}
  li{float:none;display:block;width:100%;}
  .dropdown:hover .dropdown-content {position:relative;}
}
	<header>
		<div id="nav">
				<nav id="navbarH">
					<ul class="navbar left">
						<li class="navBtn ${ page == 'index'  ? 'active' : '' } "><a href="#">Home</a></li>
					</ul>
					
					<ul class="navbar right">
						<li class="navBtn ${ page == 'userProfile' ? 'active' : '' } "><a href="#">
					    	username</li>
					    
					    <li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
					    	<a class="dropbtn" href="#">Admin</a>
					    		<div class="dropdown-content">
									<a href="#">Add Track</a>
									<a href="#">Add Album</a>
									<a href="#">Add Genre</a>
									<a href="#">Add Performer</a>
								</div>
					    </li>	

						<li class="navBtn ${ page == 'userPlaylist' ? 'active' : '' } "><a href="#">Playlist</a></li>
					    <li class="navBtn"><a href="#">Log Out</a></li>
					</ul>
				</nav>

				<nav id="navbarV">
						<ul class="navbar">
							<li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
						    	<a class="dropbtn" href="#">Admin</a>
						    		<div class="dropdown-content">
										<a href="#">Add Track</a>
										<a href="#">Add Album</a>
										<a href="#">Add Genre</a>
										<a href="#">Add Performer</a>
									</div>
						    </li>	
						    <li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
						    	<a class="dropbtn" href="#">Admin</a>
						    		<div class="dropdown-content">
										<a href="#">Add Track</a>
										<a href="#">Add Album</a>
										<a href="#">Add Genre</a>
										<a href="#">Add Performer</a>
									</div>
						    </li>	
						</ul>	
				</nav>
		</div>
	</header>

And this is what it currently does: As you can see the vertical menu ( I changed the color so you can clearly make the difference) is coming over the horizontal one and that's not good at all. I'd like to have it as responsive as possible too. I really hope someone will help me and explain why it's working. Thanks for your help !

And this is what it does

Solution

  • You can add a top attribute to your vertical navigation bar. I also cleaned up the HTML as you were missing some closing tags.

      <div>
        <nav id="navbarH">
                    <ul class="navbar left">
                        <li class="navBtn ${ page == 'index'  ? 'active' : '' } "><a href="#">Home</a></li>
                    </ul>

                    <ul class="navbar right">
                        <li class="navBtn ${ page == 'userProfile' ? 'active' : '' } "><a href="#">
            username</a></li>

                        <li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
                            <a class="dropbtn" href="#">Admin</a>
                                <div class="dropdown-content">
                                    <a href="#">Add Track</a>
                                    <a href="#">Add Album</a>
                                    <a href="#">Add Genre</a>
                                    <a href="#">Add Performer</a>
                                </div>
                        </li>   

                        <li class="navBtn ${ page == 'userPlaylist' ? 'active' : '' } "><a href="#">Playlist</a></li>
                        <li class="navBtn"><a href="#">Log Out</a></li>
                    </ul>
                </nav>
  </div>
  <div>

            <nav id="navbarV">
                        <ul class="navbar">
                            <li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
                                <a class="dropbtn" href="#">Admin</a>
                                    <div class="dropdown-content">
                                        <a href="#">Add Track</a>
                                        <a href="#">Add Album</a>
                                        <a href="#">Add Genre</a>
                                        <a href="#">Add Performer</a>
                                    </div>
                            </li>   
                            <li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
                                <a class="dropbtn" href="#">Admin</a>
                                    <div class="dropdown-content">
                                        <a href="#">Add Track</a>
                                        <a href="#">Add Album</a>
                                        <a href="#">Add Genre</a>
                                        <a href="#">Add Performer</a>
                                    </div>
                            </li>   
                        </ul>   
                </nav>

  </div>

    And this is the CSS with top: 40px;

    nav#navbarV{
    display:inline-block;
    float:left; 
    background-color: #808000;
    font-size: 30;
    left: 0;
  top:40px;
    height:100%;
    position:fixed;
    width:15%;
}