Jump to content

HTML/CSS Help


alexdelrio
 Share

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

});

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...