Jump to content

Recommended Posts

Hi,

I am new to coding and I am working on creating a new nav bar for my company site. So far, it's coming out decently well but I am running into an issue and was hoping someone could help me. I can't seem to center my dropdown portion of the nav bar on mobile. Any help would be greatly appreciated!

 

HTML:

<html>

<head>

<link href="[https://fonts.googleapis.com/css?family=Montserrat:600&display=swap](https://fonts.googleapis.com/css?family=Montserrat:600&display=swap)" rel="stylesheet">

</head>

<body>


 

<span class="navbar-toggle" id="js-navbar-toggle">

<i class="fas fa-bars"></i>

</span>

<a href="[https://theretirementinstructor.com](https://theretirementinstructor.com)"><img src="[https://i.imgur.com/MNW22YI.png](https://i.imgur.com/MNW22YI.png)" class="logo" alt="AFF-Logo"></a>

<ul class="main-nav" id="js-menu">

<li>

<a href="[https://theretirementinstructor.com/about/](https://theretirementinstructor.com/about/)" class="nav-links">About</a>

</li>

<li>

<a href="[https://theretirementinstructor.com/attend-an-event/](https://theretirementinstructor.com/attend-an-event/)" class="nav-links">Events</a>

</li>

<li>

<a href="[https://theretirementinstructor.com/resources/](https://theretirementinstructor.com/resources/)" class="nav-links">Resources</a>

</li>


 

<a href="[https://theretirementinstructor.com/financial-services/](https://theretirementinstructor.com/financial-services/)" class="nav-links">Financial Services</a>

</li>


 

<a href="#" class="nav-links">Client Access</a>

<ul>

<li> <a href="[https://www.rightcapital.com/login?cobrand=soCBPCxAN09bwRUnzkT-Sg&type=client](https://www.rightcapital.com/login?cobrand=soCBPCxAN09bwRUnzkT-Sg&type=client)">Retirement Plan</a></li>

<li> <a href="[https://www.advisorclient.com/login](https://www.advisorclient.com/login)">TD Ameritrade</a></li>

<li> <a href="[https://login.orionadvisor.com/](https://login.orionadvisor.com/)">Orion</a></li>

</ul>

</li>

<li>

<a href="[https://theretirementinstructor.com/blog/](https://theretirementinstructor.com/blog/)" class="nav-links">Blog</a>

</li>


 

<a href="[https://theretirementinstructor.com/schedule-a-meeting/](https://theretirementinstructor.com/schedule-a-meeting/)" class="nav-links">Contact</a>

</li>

</ul>

</nav>

</body>

</html>

 

 

CSS:

 

@charset "UTF-8";

/* CSS Document */

 

/* Reset CSS */

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

 

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {


 

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {


 

}

body {


 

}

ol, ul {


 

}

blockquote, q {


 

}

blockquote:before, blockquote:after,

q:before, q:after {


 

}

table {


 

}

 

 

 

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

 

 

 

.navbar {

font-family: 'Montserrat', sans-serif;

letter-spacing: 0.05em;

font-size: 16px;

background-color:#FFFFFF;

}

 

.main-nav {

list-style-type: none;

display: none;

}

 

.nav-links,.nav-link-main

 

{

text-decoration: none;

color: #000000;

position: relative;

}

 

.main-nav li {

text-align: center;

margin: 20px auto;

padding-left: 10px;

}

 

nav ul li ul {

display: none;

position: absolute;

background-color: #e8e8e8;

border-radius: 0px 0px 4px 4px;

}

 

nav ul li:hover ul {

display:block;

}

 

nav ul li ul li{

width: 180px;

padding: 4px;

border-radius: 4px;

}

 

nav ul li ul li a {

padding: 2px;

}

 

nav ul li ul li a:hover {

background-color: #f3f3f3;

}

 

 

.logo {

display: inline-block;

margin-top: 10px;

width: 210px;


 

}

 

.navbar-toggle {

position: absolute;

top: 10px;

right: 20px;

cursor: pointer;

color: #b44438;

font-size: 24px;

}

 

.active {

display: block;

background-color: #F2F2F2;

}

 

 

@media screen and (min-width: 768px) {

.navbar {

display: flex;

justify-content: space-between;

padding-bottom: 0;

height: 70px;

align-items: center;

}

.main-nav {

display: flex;

margin-right: 30px;

flex-direction: row;

justify-content: flex-end;

}

 

.main-nav li {

margin: 0;

}

 

.nav-links {

margin-left: 20px;

 

}

 

.logo {

margin-top: 0;

}

 

.navbar-toggle {

display: none;

}

 

.logo:hover,

.nav-links:hover {

color: #b44438;

}

}

 

 

JS:

 

// JavaScript Document

let mainNav = document.getElementById("js-menu");

let navBarToggle = document.getElementById("js-navbar-toggle");

 

navBarToggle.addEventListener("click", function() {

mainNav.classList.toggle("active");

});

Share this post


Link to post
Share on other sites

Hi there,

Your code hasn't translated that well through direct copy-paste, may I ask that you edit your post with the code inside a code block?

XcQfW3F.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...