I'm animating the dropdown of my navbar using a rotateX transform command. On desktop (every browser) works well, however on iPad it glitches (the effect moves the dropdown under the navbar for an instant). When I remove the rotation the object properly displays on every device.
I'm using TailwindCss, but to make debugging simpler I just created a couple of "fictitious" css classes resuming the core CSS classes applied by Tailwind.
Expected result [desktop] (on the left) vs actual behaviour [iPad] (on the right):
.nav{
height: 4rem;
width: 100vw;
background-color: red;
position: fixed;
z-index: 40;
}
.container{
height:100%;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.button{
color:white;
padding: 4rem 2rem;
cursor: pointer;
}
.dropdown{
background-color: rgba(35, 43, 50, 0.9);
border-radius: 0.5rem;
margin:0;
padding:0;
list-style: none;
width: 14rem;
position: absolute;
overflow: hidden;
transform: perspective(999px) rotateX(-12deg);
transform-origin: top center;
}
.dropdown-item{
padding: 1rem;
--rounded-top:0;
--rounded-bottom:0;
border-top-left-radius: var(--rounded-top);
border-top-right-radius: var(--rounded-top);
border-bottom-right-radius: var(--rounded-bottom);
border-bottom-left-radius: var(--rounded-bottom);
}
.dropdown-item:hover{
background-color: rgba(102, 108, 113, 0.9);
}
.dropdonw-item.first{
--rounded-top:0.5rem;
}
.dropdonw-item.last{
--rounded-bottom:0.5rem;
}
<nav class="nav">
<div class="container">
<div class="button">
<p>Button</p>
<ul class="dropdown">
<li class="dropdown-item first">Item 1</li>
<li class="dropdown-item">Item 2</li>
<li class="dropdown-item last">Item 3</li>
</ul>
</div>
</div>
</nav>
Related
I am new to css grid and I just understood how exactly positioning the grid elements works. What I don't understand is how to put an item that's resizing inside this grid element.
I will explain it this way:
This is my site's layout
and this is my code:
<div class="container">
<div class="header">Header</div>
<div class="content1">Content1</div>
<div class="content2">Content2</div>
<div class="footer">footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 1fr 1fr 120px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.header {
grid-column: 1 / 5;
}
.content1 {
row-gap: 200px;
grid-column: 1 / 5;
grid-row: 2 / 3;
}
So now what I would love to do is in that header box an actual navigation menu but I want somehow to be only inside this box and resize automatically when I change the size of that box. Right now this is what I have done:
2nd picture
code:
<div class="header">
<nav>
<ul>
<li> <a text-white asp-area="" asp-page="/main">Home</a></li>
<li><a text-white asp-area="" asp-page="/pc">Games</a>
<ul>
<li><a text-white asp-area="" asp-page="/pc">PC</a></li>
<li><a text-white asp-area="" asp-page="/xbox">XBOX</a></li>
<li><a text-white asp-area="" asp-page="/ps">PS</a></li>
</ul>
</li>
<li><a text-white asp-area="" asp-page="/devices">Devices</a></li>
<li><a text-white asp-area="" asp-page="/pcparts">PC Parts</a></li>
</ul>
</nav>
</div>
.header {
grid-column: 1 / 5;
}
nav p {
float: left;
color: white;
font-size: 20px;
line-height: 40px;
}
nav ul {
float: left;
background-color: #222;
z-index: 998;
}
nav ul li {
float: left;
list-style: none;
padding: 0px 15.50px;
}
nav ul li a {
display: block;
font-family: arial;
background-color: #222;
color: #fff;
font-size: 16px;
padding: 26px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #222;
outline-color: #f92525;
padding: 0px 2px;
padding-left: 0vh;
left: 2px;
width: 35px;
border-radius: repeat (5, 4px);
}
and this is so wrong that I don't really have an idea how it should be. I am sorry if this question exists but I tried to find a solution and I could not resolve the problem with anything I got from the Internet, nor understood how it should be.
Some general tips:
Don't define your site layout using both grid template rows and grid template columns.
Instead: If you have Sidebar, use grid-template-columns, if you have stacked content (like you), just use display:grid; This will force the content to stack ontop of each other.
Don't define static heights for your header and footer
Instead: Work with the spacing of the elements inside (margin and padding) to make your container responsive.
Get familiar with Flexbox and Grid a bit more to easily get started modelling your site, for example spacing out your menu items and much more.
Resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Here is an example of those tricks:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 1rem;
}
.main {
display: grid;
}
.nav, .content {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.nav {
padding: 2rem;
}
.content {
padding: 5rem;
}
<div id="main">
<header class="nav">Header</header>
<div class="content">Content 1</div>
<div class="content">Content 1</div>
<footer class="nav">Footer</footer>
</div>
i have started to put together a website, that uses a drop down menu in smaller sizes.
it is http://www.southmoorac.com/newindex.html
i have two pages working, the home age and the league page, but it's the drop down menu that is giving me problems, or should i say, viewing it on an iphone.
i have tested it on a pc, chrome developer tools, and it is working fine, but when view on an iphone that gives me a problem.
i have worked out that it is one line of code that is not working on the phone that is giving me the problem, so i'm looking for a work around.
this is the releveant html:
.menu {
position: absolute;
text-align: left;
top: 0;
left: 0;
background-color: rgba($dgreen, 0.99);
width: 100%;
height: 100vh;
transform: scale(1, 0);
transition: 400ms;
transition-timing-function: cubic-bezier(1, 0, 0, 1);
transform-origin: top;
&__box {
margin: 0;
padding: 0;
list-style: none;
height: 100vh;
display: flex;
flex-direction: column;
cursor: pointer;
}
&__list-item {
#include letterspace(0.3rem);
width: 100%;
height: 100%;
// padding: 6.2vh;
border-bottom: 1px solid rgba(121, 122, 121, 0.301);
}
&__item-link {
display: flex;
align-items: center;
color: $orange;
font-size: 1rem;
text-decoration: none;
text-transform: uppercase;
height: 100%;
width: 100%;
padding: 2.2vh;
padding-left: 20%;
padding-right: 0;
&:hover,
&:focus {
background-color: $orange;
color: white;
}
}
<nav class="menu">
<ul class="menu__box">
<li class="menu__list-item"><a href="http://www.southmoorac.com/newindex.html"
class="menu__item-link menu__active uncheck"><i
class="fas fa-home menu__icon"></i>Home</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="fas fa-info menu__icon"></i>About Us</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-calendar-alt menu__icon uncheck"></i>Matches</a>
</li>
<li class="menu__list-item"><a href="http://www.southmoorac.com/new_season_summary.php"
class="menu__item-link uncheck"><i class="fas fa-trophy menu__icon ">
</i>League
Table</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-envelope-open menu__icon "></i>Contact Us</a>
</li>
</ul>
</nav>
the code that is causing the problems is the height:100% line in the &__item-link.
the iphone just does not like it.
i have tried taking it out and using veritcal padding to gain height for the a link, but that's been like trying to nail jelly on a wall between different screen heights. it gets around the iphone display problem, but is not a real solution.
i hope you can help....
thanks
malcolm
I'm trying to make it so when you hover over one of the categories in the header nav "CALLS | CHATS | MORE" the subnav below shows and the ul that is associated with the header nav changes its background color i know i can just add a class using jQuery but could i not do this with a sibling selector or something? i just think my HTML is layed out incorrectly at the moment for it to work TIA. this is what i currently have.
<header class="header">
<ul class="header__nav">
<li class="header__navItem header__navItem--calls">Calls</li>
<li class="header__navItem header__navItem--chats">Chats</li>
<li class="header__navItem header__navItem--more">More</li>
</ul>
<nav class="navigation">
<div class="navigation__wrapper cf">
<ul class="navItems navItems--calls">
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<div class="bgHover"></div>
</ul>
</div>
</nav>
</header>
.header {
height: 5.8rem;
background: rgba(25, 25, 25, 0.9);
position: absolute;
width: 100%;
z-index: 999;
&__nav {
display: inline-block;
text-align: center;
font-size: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0;
margin: 0;
}
&__navItem {
color: $white;
display: inline-block;
#include font-size(18);
padding: 0 4rem;
line-height: 5.8rem;
letter-spacing: 0.1rem;
position: relative;
cursor: default;
font-weight: 400;
text-transform: uppercase;
font-family: $lato;
&--calls {
&:hover ~ .navigation__wrapper .navItems .bgHover {
max-height: 35rem;
}
&:hover {
color: red;
}
}
}
I'm presuming you want the submenu to appear below the header nav. If so, then move your sub nav into the li tag for the corresponding header item, like so:
<li class="header__navItem header__navItem--calls">Calls
<ul class="navItems navItems--calls">
<li class="navItems__item">First</li>
<li class="navItems__item">Second</li>
<li class="navItems__item">Third</li>
<li class="navItems__item">Fourth</li>
</ul>
</li>
I have two specific questions concerning my website for my class.
First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.
Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right. This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections. However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.
Here is the Theme.html page code below. I only included the first "section" for brevity's sake.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li>Home</li>
<li>Theme/Genre>
<ul class="submenu"><!--Added .submenu-->
<li>Horror</li>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Space</li>
<li>Nuclear Apocalypse</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images">
<p>Arkham Horror is a great deck building game.</p>
<br>
<img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images">
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it.
Here is my CSS code below for the theme/genre's sections and navigation code:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
Is there any way to permanently move these sections to the right out of the way of the nav bar?
Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar. As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest.
How do I remove the scroll bar and show ALL seven sub-directories?
Thanks a lot for any and all help you may give. I do appreciate it.
You could handle your submenu items with the css :hover states.
And you could place your menu and your content like this :
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
and add display: flex; on the .site-container.
Set the width: of your menu to 200px for example
And the width of the main content to calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
You could do an improvement by fixing your menu at the top left of the screen with position: fixed; top: 0; left: 0; z-index: 2;, so it's always visible. And set position: absolute; left:100%; top: 0; on the submenu and position: relative; on its parent li, so the submenu will appears at the right of your menu. It will prevent the menu from doing "Yo-yo".
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
Use padding-left
Make sure the items that are listed are sitting in a 'container' so that all the children inside the container can sit wherever the parent sits. This allows you to use the following CSS rules for content (with the id of #content for example):
#content {
position: relative;
padding-left: 5em;
box-sizing: border-box;
width: 100%;
}
Explanation
position: relative - make sure the children abide by the basic rules of the parent
padding-left: 5em - Push the parent (content) to the right of the menu by 5em, all children will be relative to the parent
box-sizing: border-box - keep all the padding relative to the inside the width and height of the container (by subtracting the size) rather than appending size dynamically.
width: 100% - Let the container fill the rest of the space (1)
1) if width: 100% is over-taking the space of the menu then consider using width: calc(100% - 5em) where 5em is the width of the menu
Note It's worth putting into consideration that to do this you normally need a fixed/max-width menu and would be ideal to do so. Otherwise text, images and so on may expand the menu infinitely within a percentage of that space.
element:hover
To eliminate the scrollbar on the menu you will have to find what is taking up the space. If these are more items that you want to show/hide when the cursor is above the menu item you can use the element selector :hover which can tell the menu to hide certain items. You can then use it to set before the hover event occurs and during the hover event. For example:
body { background: white; }
body:hover {background: red;}
A more relative example would be to set the height of the main menu item so that the rest cannot be shown (with the use of overflow: hidden)
ul li ul li {display: none};
ul li:hover ul li {display: block}
What I'm trying to achieve:
I tried using a nested unordered list but found it difficult to set 2 buttons to the left and 2 buttons to the right, I am now trying something a little different but still no success, also I want the distance between these button to stay constant when viewed on different sized displays. Any help would be greatly appreciated.
(If anyone is familiar with xml you'll know that that its possible to give things a weight. so say you have 3 items in a box and you give them all a weight of 1 each items would take up a third of the space in the box, is there anything like this in html?)
This is what I have so far.
#navContainer nav {
display: inline-block;
}
#nav1 {
background: aqua;
position: absolute;
left: 0;
}
#nav2 {
background: pink;
position: absolute;
right: 0;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
How about a flexbox approach, then you only need one list
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
width: 100%;
justify-content: space-between; /* spreads things across the horizontal line */
}
.signin {
margin-left: auto; /* moves this to the right */
margin-right: 10px; /* gap between signin and signup */
}
.help {
margin-right: auto; /* don't need this really */
margin-left: 10px; /* gap between highscores and help */
}
<nav id="nav1">
<ul>
<li class="highscores">Highscores</li>
<li class="help">Help</li>
<li class="signin">Signin</li>
<li class="signup">Signup</li>
</ul>
</nav>
you can use flexbox,
just using 1 ul removing extra markup unnecessary
ul {
display: flex;
justify-content: space-between;
align-items: flex-end;
background: lightblue;
height: 160px;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
li:nth-last-of-type(2) {
margin-left: auto
}
<ul>
<li>Highscores</li>
<li>Help</li>
<li>Signin</li>
<li>Signup</li>
</ul>
just using 1 nav and 2 ul if you want to keep the container at a minimal state
nav{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 160px;
background: lightblue
}
ul:last-of-type {
margin-left: auto
}
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
<nav id="navContainer">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
You can do it with the Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
ul {
list-style: none;
display: flex;
}
ul > li {
margin: 5px;
padding: 5px 0;
width: 125px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-weight: bold;
text-transform: uppercase;
border-radius: 25px;
background: purple;
}
#navContainer {
display: flex;
justify-content: space-between;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
I don't understand ur question completely, but I think this might be your solution:
<html>
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/pageFormatting.css">
<style>
#navContainer nav {
display: inline-block;
}
li {display:inline;margin:20px;}
#nav1 {
background-color: aqua;
position: absolute;
left: 0;
display:inline-block;
}
#nav2 {
background-color: pink;
position: absolute;
right: 0;
display:inline-block;
}
</style>
</head>
<body>
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
</body>
</html>
I added tags and the head and body tags. Within those style tags I wrote the css. nav1 is now left en nav2 is now right.
Tell me if I'm wrong.