Can you please help me with making my existing header responsive? I've tried a lot, but nothing worked... Here is the HTML Code:
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">CVaS</h4>
</div>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="one.html">1. Link</a></li>
<li><a class="nav-link" href="two.html">2. Link</a></li>
<li><a class="nav-link" href="three.html">3. Link</a></li>
</ul>
</nav>
</header>
And here is the CSS Code:
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
margin: auto;
align-items: center;
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
}
.logo {
font-weight: 400;
margin: 5px;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 112%;
text-decoration: none;
}
I hope you can help me :) It would be great if the visitors could open the header through a burger icon...
Here you can simply use bootstrap to make it responsive.
Following is the code for adding the bootstrap.
You simply need to add the link and scripts in your head.
<head>
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
Code for Responsive Header:
<div class="logo-container row">
<img src="./img/logo.svg" class="col-6" alt="logo" />
<h4 class="logo col-6">CVaS</h4>
</div>
And now the code for Responsive Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Link-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link-2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link-3</a>
</li>
</ul>
</div>
</nav>
Note: You won't need to add css style after this most likely.
If you don't want to use bootstrap then you can simply use media queries in css for different widths. You can make it responsive using position property in css along with media query.
if you can use bootstrap, you should use col-sm-[1 - 12], col-md-[1 - 12], col-lg-[1 - 12] and `col-xl-[1 - 12] classes.
Try this code for https://www.w3schools.com/howto/howto_js_topnav_responsive.asp this will be a great place to start if u just learning code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
You don't make something responsive. You build it responsive in the first place. Start by styling it from mobile, tablet and desktop. Use the CSS media queries.
You can use bootstrap (Free). Then for the menu area you may be best using something like the Navbar:
https://getbootstrap.com/docs/4.5/components/navbar/
This will then swap to a hamburger menu on small screens (if you want).
Related
I am learning bootstrap 4 and found a navbar via this link: https://carrabbasatlanticcanada.com/
Have really struggled to find a scrollable nav for bootstrap4 that has styles changed on scroll (no logo and position fixed on mobile view).
I have created a navbar like the one in the link that uses 2 seperate navs that are styled so it works the same way: a visible nav and logo, then a scrollable nav with no logo, and fixed nav and logo on mobile devices.
I feel this is quite of a minimal code solution for bs4 and may get around problems with position sticky not working in internet explorer?
I am still fairly new to coding. Is this code OK?
Is it OK to use 2 seperate navs or is there a better solution using 1 nav and some javascript for styling?
Any feedback or possible improvement most welcomed!
HTML:
<nav class="navbar navbar-expand-md mynav">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="navbar2">
Home
News
Contact
</div>
<!--Javascript for scrollable nav-->
<script type="text/javascript">
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 120) {
document.getElementById("navbar2").style.top = "0";
} else {
document.getElementById("navbar2").style.top = "-50px";
}
}
</script>
CSS:
/Fixed navbar/
.mynav{
background-color: black;
}
.navbar .navbar-nav li a, .navbar-brand{
color: white;
}
.navbar-toggler{
background-color: green;
}
/*Scrollable navbar*/
#navbar2 {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: -450px; /* Hide the navbar 50 px outside of the top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar2 a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar2 a:hover {
background-color: #ddd;
color: black;
}
/media queries to make the pop down nav disappear on small screens and the hambrger to be fixed/
#media screen and (max-width: 600px){
#navbar2{
display: none;
}
.mynav{
position: fixed;
width: 100%;
}
.top-bar{
display: none;
}
.header-area{
background-color: #000;
height: 20px;
}
}
#media screen and (min-width: 600px){
#navbar2{
visibility: visible;
}
.navbar-toggler{
visibility: hidden;
}
}
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. After my last edit it´s only show dropdown menu but I don´t click on any link. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover ~ .dropdown-content {display: block;}
</style>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
For this case I would suggest using Bootstrap, it will make life easier for you. It mainly allows people to apply some nice functionalities without leaving their HTML.
Here is the link to the docs of bootstrap v4.6 navbars. And here you can find all the docs.
You could try to integrate something as bellow in your website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" defer></script>
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
</head>
<body>
<!-- Start of navbar -->
<nav class="navbar navbar-expand-sm navbar-dark" style="background:#FFBD35">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- Section_1 link -->
<li class="nav-item active">
<a class="nav-link" href="#">Úvodné Menu<span class="sr-only">(current)</span></a>
</li>
<!-- Section_2 link -->
<li class="nav-item">
<a class="nav-link" href="#">Online hodiny</a>
</li>
<!-- Section_3 link -->
<li class="nav-item">
<a class="nav-link" href="#">Testy na vyplnenie</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user"></i> Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
</body>
</html>
if i understand your question correctly you are searching for a simple dropdown menu with js?
here is a short excample
HTML:
<html lang="en">
<head>
<!-- your header settings -->
<link rel="stylesheet" href="page.css">
</head>
<body>
<header>
<span id="dropbtn">
<span class="fa fa-user"></span>
<span>Dropdown</span>
<span class="fa fa-caret-down"></span>
</span>
<div id="dropdown-content" class="hidden">
Link 1
Link 2
Link 3
</div>
</header>
<script src="menu.js"></script>
</body>
</html>
First in this excample HTML, CSS and JS in seperated Files. Than you get a better overview and your code perhaps will be reuseable in future ;)
CSS:
.hidden {
display:none;
}
JavaScript:
function clickListener_btn(event){
/** #type {HTMLElement} */
let clickedElement = event.currentTarget();
/** #type {HTMLElement} */
let dropDownMenu = document.querySelector('#dropdown-content');
if(dropDownMenu.classList.has('hidden') {
dropDownMenu.classList.remove('hidden');
} else {
dropDownMenu.classList.add('hidden');
}
}
/** #type {HTMLElement} */
let btn = document.querySelector('#dropbtn');
btn.addEventListener('click', clickListener_btn);
Problem No. 1 with your code. You click on a <a> Tag as button. So a new Link will be forced. That automaticly runs a reload if you have no href set. This is because in the sample a simple <span> element is used as button.
i hope this will be helpfully to you.
And another thing. I'm very sure there are tons of questions for dropdown menus in the database. Try to find samples to fix your code.
Another trick can be to do the dropdown only with css but i think this will be to hard for the beginning. ohterwise use your favorite search engine on look for "css only dropdown"
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>
The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.
I'm trying to fix my drop down menu items. When I hover over them, it only highlights the text and not the whole element. I have tried inline-block and block but cant seem to get it to change.
Here is the relevant php/html:
<div class="navigation w3-container clearfix">
<ul class="topnav" id="myTopnav">
<?php
$query = "SELECT * FROM categories";
$select_all_categories_query = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($select_all_categories_query)) {
$cat_title = $row['cat_title'];
$cat_position = $row['cat_position'];
$cat_thumbnail = $row['cat_thumbnail'];
$cat_image = $row['cat_image'];
$cat_link = $row['cat_link'];
$cat_dropdown = $row['cat_dropdown'];
if($cat_dropdown=="no"){
echo "<li> <a href='{$cat_link}'>{$cat_title}</a></li>";
}
else{
echo "<li class='dropdown'><a href='#' class='dropbtn'>Dropdown</a>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</li>";
}
}
echo "<li class='icon'><a id='lastli' href='javascript:void(0);' onclick='myFunction()'>☰</a></li>";
?>
</ul>
</div>
Here is the relevant styling:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
z-index: 1000;
display: block; !important
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center;
}
.dropdown:hover .dropdown-content{
background-color: #333;
display:block;
}
.dropdown-content a:hover {
background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block; !important
}
I have attached a picture to explain the issue, as you can see it's only the drop down where it does not highlight the whole box:
Really new to all of this and trying hard to learn so thank you for all the help guys!
EDIT: HERE IS THE SOURCE CODE/HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Website developing</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
body, html {
height: 100%;
}
h1{
padding:0;
margin:0;
}
.header{
/*background-color: #434A54;*/
background-color: #00001a;
padding-bottom:20px;
width:100%;
}
.logo{
padding-top:25px;
float:left;
}
.logo h1{
margin:auto;
font-weight:bold;
font-size:1.5em;
color:white;
}
.search{
padding-top:20px;
float:right;
}
.content_Box{
background-color: #EEEEEE;
padding-left: 10px;
padding-top:5px;
padding-bottom:5px;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;
}
#noBorder{
border-right: none;
}
#categoryRight{
float:right;
}
#lastli{
border-right: none;
}
.navigation{
background-color:#333;
}
#loginimage{
padding-bottom:8px;
height:25px;
}
.clear {
clear: both;
}
.margintop{
margin-top:10px;
}
.upcomingevents{
height:100%;
border:1px solid grey;
text-align:center;
}
.highlightbox{
height:70px;
background-color:red;
margin-bottom:3px;
}
.noticeboard{
height:70px;
background-color:pink;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: red;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
/*ul.topnav li:not(:first-child) {display: none;} */
ul.topnav li{display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
#categoryRight{
float:none;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
border:none;
}
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
display:inline-block;
}
li.dropdown {
z-index: 1000;
display: block; !important
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center;
}
.dropdown:hover .dropdown-content{
background-color: #333;
display:block;
}
.dropdown-content a:hover {background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block; !important
}
</style>
<body>
<div class="header w3-container" >
<!-- <div class="col-md-4 col-md-offset-4"> -->
<div class="col-md-8">
<div class="logo">
<h1> Logo here </h1>
</div>
</div>
<div class="col-md-4 ">
<form action="search.php" method="post">
<div class="input-group search">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
</div>
</div>
<div class="navigation w3-container clearfix" >
<ul class="topnav" id="myTopnav" >
<li> <a href='index.php'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
<div class='dropdown-content'>
<a href='#' id='noBorder'>Link 1</a>
<a href='#' id='noBorder'>Link 2</a>
<a href='#' id='noBorder'>Link 3</a>
</div>
</li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
<div class='dropdown-content'>
<a href='#' id='noBorder'>Link 1</a>
<a href='#' id='noBorder'>Link 2</a>
<a href='#' id='noBorder'>Link 3</a>
</div>
</li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li id='categoryRight'><a id='noBorder' href='#'>Contact</a></li><li> <a href='#'><img id='loginimage' src='images/genericperson.png'> login</a></li><li class='icon'>
<a id='lastli' href='javascript:void(0);' onclick='myFunction()'>☰</a>
</li>
<!-- <li id="home">Home</li>
<li ><img id="loginimage" src="images/genericperson.png" > Log in</li>
<li>Contact</li>
<li id="aboutli"><a id="aboutborder" href="#about">About</a></li>
<li class="icon">
<a id="lastli" href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
-->
</ul>
</div>
<!-- Page Content -->
<div class="container mainContent">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h2 class="page-header">
Latest updates
<small>local news</small>
</h2>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
First SSC post
</h2>
<p class="lead">
by Hasman404
</p>
<p><span class="glyphicon glyphicon-time"></span>2016-09-01</p>
<p>hola everyone. The site is getting somewhere!</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<hr>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
Second post on SSC
</h2>
<p class="lead">
by Peter
</p>
<p><span class="glyphicon glyphicon-time"></span>2016-08-02</p>
<p>Now were trying to spice things up abit by adding this here.Lets see if this looks good. Need to style it all. Page heading should be resticted to one.</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<hr>
<!--This function is responsible for your posts generation -->
</div>
<!-- Blog Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Blog Search Well -->
<!-- <div class="well"> -->
<h4>Blog Search</h4>
<form action="search.php" method="post">
<div class="input-group">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
<!-- /.input-group -->
<!-- </div> -->
<!-- Blog Categories Well -->
<!-- <div class="well"> -->
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li> <a href='#'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li> <a href='#'>Study Material</a></li><li> <a href='#'>Result</a></li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li> <a href='#'>Contact</a></li><li> <a href='#'>login</a></li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- </div> -->
<!-- Side Widget Well -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2016</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("logo");
y.className += " responsive";
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!--
<div class="container margintop clear">
<div class="row">
<div class="col-md-4">
<div class="upcomingevents">
<h1> Upcoming events </h1>
</div>
</div>
<div class="col-md-4">
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
</div>
<div class="col-md-4">
<div class="noticeboard">
</div>
</div>
</div> <!-- Row ends here
</div>
-->
You need to give your anchor element a width:
.dropdown-content a {
display:block;
box-sizing:border-box;
width:100%;
}
Example bootply
Also please note, your code has multiple duplicate ids - ids should be unique
and your dropdown content links should really being in a child ul (to be more semantically correct):
<ul class="topnav" id="myTopnav">
<li> Home</li>
<li> Latest update</li>
<li> SSC</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
Updated bootply with first dropdown as ul
Try giving the min-width attribute to anchor tag..
increase the min - width
When I click on the navbar-collapse button, the elements from the navbar expand but they're not vertically aligned. How would you do this by keeping Link5 and Link6 right-aligned on the navbar?
Here's the JSFiddle: http://jsfiddle.net/sushiknives/yvgr92c3/1/
EDIT: nav-pills seems to be the issue. If I replace it with navbar-nav it automatically stacks vertically. In that case is there a way to recreate the nav-pills effect?
you can use flexbox property flex-direction : column to stack it vertical hope this will help you
body {
width: 100% margin: auto;
background-color: #f7f7f7;
}
.navbar {
background: #FFFFFF
}
.nav {
width: 100%
}
.nav a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: column;
}
.nav li {
display: inline;
}
.content {
margin-top: 100px;
}
<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="texthover_test.css">
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav nav-pills">
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="pull-right">Link5
</li>
<li class="pull-right">Link6
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope I understand your question. The li has to be full width of the parent element or you can shorten the width of the ul itself and make the li the same width as the ul. Adjust as needed.
.nav li{
display: block;
width: 100%;
}
See it stacked as you want