HTML/CSS Help

alexdelrio · July 6, 2019

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>

</head>

<body>

</span>

<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>

</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");

});

Funce · July 8, 2019

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?

Sign In

HTML/CSS Help

Recommended Posts

alexdelrio

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity