Question : nav bar css
Answered by : you
.navbar { background-color: #f8f8f8; padding: 10px;
}
.navbar ul { list-style-type: none; margin: 0; padding: 0;
}
.navbar li { display: inline-block; margin-right: 10px;
}
.navbar a { text-decoration: none; color: #333; padding: 5px;
}
.navbar a:hover { background-color: #333; color: #fff;
}Source : | Last Update : Mon, 18 Sep 23
Question : navigation menu css
Answered by : relieved-rattlesnake-rphio9z6ywxp
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* { margin: 0; padding: 0;
}
body { font-family: 'Poppins', sans-serif; background-color: #2d3436;
}
nav { margin-top: 200px; text-align: center;
}
nav ul { display: inline-block; list-style: none; transform: skew(-25deg);
}
nav ul li { background-color: #fff; float: left; border-right: 1px solid #eee; box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 1); text-transform: uppercase; color: #555; font-weight: 400; transition: all 0.2s linear;
}
nav ul li:hover { background-color: #0984e3; color: #fff;
}
a { color: inherit; display: block; padding: 10px 20px; text-decoration: none; transform: skew(25deg);
}
/* top-left top-right bottom-right bottom-left */
nav ul li:first-child { border-radius: 7px 0 0 7px;
}
nav ul li:last-child { border-radius: 0 7px 7px 0;
}Source : https://www.tutorjoes.in/css_blog/index | Last Update : Sat, 22 Jul 23
Question : html css navbar
Answered by : you
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for navbar */
.navbar { overflow: hidden; background-color: #333;
}
.navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
.navbar a:hover { background-color: #ddd; color: black;
}
</style>
</head>
<body>
<!-- Navbar -->
<div class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a>
</div>
<!-- Rest of the page content -->
</body>
</html>Source : | Last Update : Tue, 19 Sep 23
Question : navbar css
Answered by : kirupan-inpathas
{"tags":[{"tag":"textarea","content":"<!DOCTYPE html>\n\n<html lang=\"en\">\n\n\u2002<head>\n\n\u2002\u2002\u2002<meta charset=\"UTF-8\" \/>\n\n\u2002\u2002\u2002<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n\n\u2002\u2002\u2002<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n\n\u2002\u2002\u2002<link rel=\"stylesheet\" href=\"style.css\" \/>\n\n\u2002\u2002\u2002<title>Document<\/title>\n\n\u2002<\/head>\n\n\u2002<body>\n\n\u2002\u2002\u2002<nav class=\"navbar\">\n\n\u2002\u2002\u2002\u2002\u2002<!-- LOGO -->\n\n\u2002\u2002\u2002\u2002\u2002<div class=\"logo\">MUO<\/div>\n\n\u2002\u2002\u2002\u2002\u2002<!-- NAVIGATION MENU -->\n\n\u2002\u2002\u2002\u2002\u2002<ul class=\"nav-links\">\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<!-- USING CHECKBOX HACK -->\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<input type=\"checkbox\" id=\"checkbox_toggle\" \/>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<label for=\"checkbox_toggle\" class=\"hamburger\">☰<\/label>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<!-- NAVIGATION MENUS -->\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<div class=\"menu\">\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Home<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">About<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li class=\"services\">\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<a href=\"\/\">Services<\/a>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<!-- DROPDOWN MENU -->\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<ul class=\"dropdown\">\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Dropdown 1 <\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Dropdown 2<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Dropdown 2<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Dropdown 3<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Dropdown 4<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/ul>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Pricing<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<li><a href=\"\/\">Contact<\/a><\/li>\n\n\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/div>\n\n\u2002\u2002\u2002\u2002\u2002<\/ul>\n\n\u2002\u2002\u2002<\/nav>\n\n\u2002<\/body>\n\n<\/html>","code_language":"css"}]}Source : https://www.makeuseof.com/responsive-navigation-bar-using-html-and-css/ | Last Update : Sat, 04 Mar 23
Question : navbar css code
Answered by : curious-caribou-naeo45ma9r7x
header img { height: 80px; margin-left: 40px;
}
body { height: 125vh; background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg'); background-size: cover; font-family: sans-serif; margin-top: 80px; padding: 30px;
}
main { color: white;
}
header { background-color: white; position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black;
}
header * { display: inline;
}
header li { margin: 20px;
}
header li a { color: black; text-decoration: none;
}Source : https://codetheweb.blog/style-a-navigation-bar-css/ | Last Update : Wed, 26 Jan 22