Adjusting desktop display for responsive site navigation with topnav and event listeners

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Adjusting desktop display for responsive site navigation with topnav and event listeners



I've been working on this for almost the entire day. I'm almost there. Just need the finishing touches that I don't know how to implement.



My navigation should look like this:
Example of navigation
This is how the desktop version should look:




body, html
max-width: 100%;
padding: 0vw;
margin: 0vw;


.header
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;


.headerfill
height: 10vh;
border: none;


.header-container
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;


.logo-container
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;


.navigation-container
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;

.space-evenly
justify-content: space-evenly;


.logo
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;


img
-webkit-user-drag: none;


.nav
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



@media only screen and (max-width: 500px)
.nav
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



.nav:hover
color: #096e67;


a:link
color: #000000;
text-decoration: none;


h1
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;


@media only screen and (max-width: 500px)
h1
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;


<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>



As you can see, all page titles are horizontal and evenly spaced.



I now have this code:




body,
html
max-width: 100%;
padding: 0vw;
margin: 0vw;


.header
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;


.headerfill
height: 10vh;
border: none;


.header-container
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;


.logo-container
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;


.navigation-container
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;


.space-evenly
justify-content: space-evenly;


@media only screen and (max-width: 500px)
.navigation-container
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;

.space-evenly
justify-content: space-evenly;

nav.active
display: block;



.logo
height: 8vh;
max-width: 80vw;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 4vh;
display: block;
object-fit: contain;


img
-webkit-user-drag: none;


.nav
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;


@media only screen and (max-width: 500px)
.nav
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



.nav:hover
color: #096e67;


a:link
color: #000000;
text-decoration: none;


h1
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;


@media only screen and (max-width: 500px)
h1
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;



button
display: none;


@media (max-width: 500px)
nav
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;

nav.active
display: inline;

button
display: block;


<html lang="en-GB">

<head>
<meta charset="utf-8" />
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button>☰</button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
</header>

<script>
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e =>
menu.classList.toggle('active')
)
</script>



The button now appears and is functional on mobile.



Fixes:



1) Show the page names horizontally on desktop.



2) Allow the button to toggle between ☰ and ✘
May be able to implement using: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> just now sure how to though.


☰


✘


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



3) Format the drop-down so that the text is within its own box on top of the page and right aligned.



I've reached a dead end. I'm just not sure how to fully make this work. Any suggestions may help. You can also edit my code as an answer to get it fully functional if possible.



Thanks in advance :)


Update 1




menu = document.querySelector('nav');
document.querySelector('i')
.addEventListener('click', e =>
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
)


body, html
max-width: 100%;
padding: 0vw;
margin: 0vw;


.header
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;


.headerfill
height: 10vh;
border: none;


.header-container
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;


.logo-container
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;


.navigation-container
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;

.space-evenly
justify-content: space-evenly;


.logo
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
padding-left:4vh;
display: block;
object-fit: contain;


img
-webkit-user-drag: none;


.nav
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



@media only screen and (max-width: 500px)
.nav
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



.nav:hover
color: #096e67;


a:link
color: #000000;
text-decoration: none;


h1
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;


@media only screen and (max-width: 500px)
h1
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;




nav
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right: auto;
text-align: right;

nav a
display:block;
padding: 10px;
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;

i
display: none !important;


@media (max-width: 500px)
nav
position: absolute;
top: 100%;
left: 0;
right: 0;

display: none;

font-family: 'Roboto', serif;
font-size: 2.5vw;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;

nav.active
display: block;

i
display: block!important;
margin:5px;


<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>



I'm most of the way there now. I've got the switching icons and most of the functionality. There's just a slight issue with text size when resizing the browser window.





If anyone is paying you to do this, use getbootstrap.com.
– user2182349
Aug 12 at 2:31





Nope, just trying to teach myself for now. @user2182349. I've almost got the menu working. I'll worry about animation after it becomes functional.
– helpmeplease
Aug 12 at 2:41





So 'Fixes' refers to what needs to be fixed?
– user2182349
Aug 12 at 2:49





@user2182349 I've got most of them now, down to a single issue with text size but I think it's an issue with redundancy. See Update 1 on the post :)
– helpmeplease
Aug 12 at 2:54



Update 1





@helpmeplease , Try my code. It works for you.
– VSM
Aug 12 at 3:47




1 Answer
1




body, html
max-width: 100%;
padding: 0vw;
margin: 0vw;


.header
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;


.headerfill
height: 10vh;
border: none;


.header-container
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;


.logo-container
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;


.navigation-container
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;

.space-evenly
justify-content: space-evenly;


.logo
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;


img
-webkit-user-drag: none;


.nav
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



@media only screen and (max-width: 500px)
.nav
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;



.nav:hover
color: #096e67;


a:link
color: #000000;
text-decoration: none;


h1
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;


@media only screen and (max-width: 500px)
h1
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;





button
display: none;


nav
display: flex;
flex: 1;
justify-content: space-evenly;


@media (max-width: 500px)
nav
position: relative;
text-align: left;
padding:10px;
display: none;

nav.active
display: inline;

button
display: block;
position: absolute;
top: -27px;
right: 10px;
width: 25px;
height: 25px;

button:before
font-family: FontAwesome;
content: "f0c9";

.header-container
flex-flow: row wrap;

.logo-container, .navigation-container
width: 100%;

.navigation-container
justify-content: flex-end;
padding-right: 10px;
position:relative;

.navigation-container.active


.navigation-container.active button:before
font-family: FontAwesome;
content: "f00d";


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button></button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>

<script>
let container = document.querySelector('.navigation-container');
let menu = document.querySelector('nav');
document.querySelector('button')
.addEventListener('click', e =>
menu.classList.toggle('active');
container.classList.toggle('active')
)
</script>

</body>
</html>



https://jsfiddle.net/Sampath_Madhuranga/1cdu745t/39/



This works for you. I have added new styles for mobile and updated layout.
Try my code. Thanks.





Thank you, I've opted against using buttons and went with fontawesome.io instead :)
– helpmeplease
Aug 12 at 4:37





@helpmeplease, It's my pleasure.
– VSM
Aug 12 at 4:48





:) Thank You, @VSM
– helpmeplease
Aug 12 at 18:17





@helpmeplease, If answer is correct, please close the question. Thanks.
– VSM
Aug 12 at 18:55






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

make 2 or more post in bootsrap

Image
Clash Royale CLAN TAG #URR8PPP make 2 or more post in bootsrap I am making a CMS and I want to add two or more content post in every row, I can made one post in one columns, please see my code below. I am using PHP , HTML and bootstrap . CMS PHP HTML bootstrap How can I add two or more content post in every row? Code: <div class="container"> <div class="row"> <!-- Post Content Column --> <div class="col-lg-4 border border-dark rounded"> <?php $query = "SELECT * FROM POSTS"; $run_query_post = mysqli_query($connection, $query); while ($row = mysqli_fetch_assoc($run_query_post)) $post_id = $row['post_id']; $post_title = $row['post_title']; $post_author = $row['post_author']; $post_date = $row['post_date']; $post_image = $row['post_image']; $post_content = substr($row['post_content'], 0, 50); $post_status = $row['post_status']; if ($post_status !=...
Read more

Store custom data using WC_Cart add_to_cart() method in Woocommerce 3

Image
Clash Royale CLAN TAG #URR8PPP Store custom data using WC_Cart add_to_cart() method in Woocommerce 3 I am creating a membership site and totally created static pages for each Membership plans (have only 3 plans). However, I have added products for each plan and when I hit SELECT PLAN button I redirect to some custom form where I ask users range of info we are going to use to fulfil the plan (same as sneakertub.com). I have written code into the PHP page which will handle SUBMIT action of the form. This PHP file, infopage.php , will process POST data I sent via POST call and stores these all data into WC session. infopage.php $customer_name = $_POST["customer_name"]; $customer_email = $_POST["customer_email"]; $customer_sex = $_POST["customer_sex"]; $customer_age = $_POST["customer_age"]; $product_id = $_POST["product_id"]; global $wp_session; $data = array( 'customer_name' => $customer_name, 'customer_email' =...
Read more

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more