I can't convert a simple navbar to a responsive navbar

Question

Hi i have a problem with the navbar, i use html5 css3 and php 7.1, i think i've failed in the css but i don't know, so thanks a lot to all for your answer, i wait. I can't convert this navbar to a responsive navbar, can someone help me?

This is the css:

#wrap {
	margin: 0 auto;
	position: fixed;
    top: 0;
    width: 100%;
	border-bottom: 3px solid red;
	z-index: 98;
}

.inner {
	margin: 0 auto;
	max-width: 940px;
	padding: 0 40px;
}

.relative {
	position: relative;
}

.right {
	float: right;
}

.left {
	float: left;
}

/* HEADER */
#wrap > header {
	background: rgba(51,51,51,0.9);
	position: static;
	padding-bottom: 20px;
}
.logo {
	display: inline-block;
	font-size: 0;
	padding-top:15px;
}
#navigation {
	position: absolute;
	right: 40px;
	bottom: 0px;
}

#menu-toggle {
	display: none;
	float: right;
}

/* HEADER > MENU */
#main-menu {
	float: right;
	font-size: 0;
	margin: 20px -170px;
}

#main-menu > li {
	display: inline-block;
	margin-left: 50px;
	padding: 2px 0;
}

#main-menu > li.parent {
}

#main-menu > li.parent > a {
}

#main-menu > li > a {
	color: #eee;
	font-size: 14px;
	line-height: 0px;
	padding: 10px 0;
	transition: .5s;
	text-decoration:none;
}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
	color: #db2323;

}

/* HEADER > MENU > DROPDOWN */
#main-menu li {
	position: relative;
}

ul.sub-menu { /* level 2 */
	display: none;
	left: 0px;
	top: 100%;
	list-style:none;
	position: absolute;
	padding-top: 10px;
	border-radius: 0 0 20px 20px;
	width: 150px;
	z-index: 99;
}

ul.sub-menu ul.sub-menu { /* level 3+ */
	margin-top: -1px;
	padding-top: 0;
	border: 1px solid white;
	left: 149px;
	top: 0px;
}

ul.sub-menu > li > a {
	background-color: #333;
	border-top: 1px solid #444;
	color: #bbb;
	display: block;
	font-size: 12px;
	line-height: 0px;
	padding: 10px 12px;
}

ul.sub-menu > li > a:hover {
	background-color: #2a2a2a; 
	color: #fff;
}

ul.sub-menu ul.sub-menu > li:first-child {
	border-top: 1px solid #444;
}

ul.sub-menu > li:last-child > a {
	border-radius: 0 0 5px 5px;
}

ul.sub-menu > li > a.parent {
	background-image: url(../images/arrow.png);
	background-size: 5px 9px;
	background-repeat: no-repeat;
	background-position: 95% center;
}

#main-menu li:hover > ul.sub-menu {
	display: block; /* show the submenu */
	height: 20px;
	opacity: 0.9;
}

@media all and (max-width: 700px) {

	#navigation {
		position: static;
		margin-top: 20px;
	}

	#menu-toggle {
		display: block;
	}

	#main-menu {
		display: none;
		float: none;
	}

	#main-menu li {
		display: block;
		margin: 0;
		padding: 0;
	}

	#main-menu > li {
		margin-top: -1px;
	}

	#main-menu > li:first-child {
		margin-top: 0;
	}

	#main-menu > li > a {
		background-color: #333;
		border: 1px solid #444;
		color: #bbb;
		display: block;
		font-size: 14px;
		padding: 12px !important;
		padding: 0;
	}

	#main-menu li > a:hover {
		background-color: #444; 
	}

	#main-menu > li.parent {
		background: none !important;
		padding: 0;
	}

	#main-menu > li:hover > a,
	#main-menu > li.current-menu-item > a {
		border: 1px solid #444 !important;
		color: #fff !important;
	}

	ul.sub-menu {
		display: block;
		margin-top: -1px;
		margin-left: 20px;
		height: auto;
		position: static;
		padding: 0;
		width: inherit;
	}

	ul.sub-menu > li:first-child {
		border-top: 1px solid #444 !important;
	}

	ul.sub-menu > li > a.parent {
		background: #333 !important;
	}
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-50%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(200%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}



    
     
      
      
        
            Home
            Forum
          
              Regolamento 
            
                Italiano
                Englese
                Automatico
              
            
          
          
              Ban MC 
            
               Bans
                Kicks
               Mutes
              
            
          
            Ban CS:GO
            Stats ts3
            Staff

and this is the html

Thanks...

viCky · Accepted Answer

Yea, there are many issues with your CSS.

On how to make it truly responsive, it clearly depends on what outcome do you want. You can either make it fluid so its truly responsive, or you can use media queries to define the placement of your content and make sure it works as intended on specific breakpoints. I would suggest you read about how to make a responsive website and use bootstrap for convenience.

For advanced coding you can also have a look at flexbox as it provides better support for responsive coding.

As for the CSS that you have provided, you need to stop using negative margins and position absolutes. Start by giving widths in percentages and align containers using floats. Then use

li {display: table-cell; width:1%;}

for your LI to make it justified.

The quickest way to learn basics of flex box is: https://flexboxfroggy.com/

I hope this helps.

I can't convert a simple navbar to a responsive navbar

Answers (1)

Related Questions

I can&#39;t convert a simple navbar to a responsive navbar

Answers (1)

Related Questions

I can't convert a simple navbar to a responsive navbar