1
\$\begingroup\$

I am doing a bottom mobile navigation for the first time. Using a lot of fixed positioning. Is there a way to get the child elements inside the fixed positioned parent element to be formated with out top, left, etc like I am currently doing. Go past the reset css, usually in another file and not important for the question. I use a css reset because I do, and I do not want to use any css frameworks like bootstrap etc. My question again is in plain CSS/HTML is there a way to do what I already stated above.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/*reset which is in another css file*/

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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}


/* end of reset */

#main-header {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100vw;
  background: purple;
}

#site-logo {
  position: fixed;
  bottom: 15px;
  right: 0;
  margin-right: 10px;
  color: #f2f2f2;
}

#main-navigation {
  margin: 10px;
  font-size: 30px;
}

label {
  cursor: pointer;
}

#toggle,
.menu {
  display: none;
  cursor: pointer;
}

#toggle:checked+.menu {
  display: block;
}

.menu {
  position: fixed;
  left: 50px;
  right: 50px;
  bottom: 50px;
  font-size: 20px;
  text-align: center;
  background: #333
}

.menu-items a {
  display: block;
  text-decoration: none;
  margin-bottom: 5px;
  padding: 3px;
  color: #f2f2f2;
}

.menu-items a:first-of-type {
  margin-top: 5px;
}

.menu-items a:hover {
  color: #ccc;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Wizardry</title>

  <link rel="stylesheet" type="text/css" href="styles/main.css">
  <link rel="stylesheet" type="text/css" href="styles/reset.css">

</head>

<body>
  <header id="main-header">
    <nav id="main-navigation">
      <label for="toggle">&#9776</label>
      <input type="checkbox" id="toggle">
      <div class="menu">
        <ul class="menu-items">
          <li><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <div id="site-logo">
      <h1>New Wizardry</h1>
    </div>
  </header>
  <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis, dui in dignissim ultrices, nisi elit luctus dolor, non vehicula libero neque ac nunc. Proin luctus commodo faucibus. Etiam sit amet feugiat sapien, ac lobortis velit. Nullam id
    metus turpis. Suspendisse potenti. Mauris quis enim eu est facilisis malesuada. Aenean a ipsum vitae ex hendrerit varius quis et dolor. Sed condimentum enim quis nunc feugiat facilisis. Aliquam a tortor ac mauris sagittis faucibus ac et lorem. Nulla
    facilisis consequat ex sed cursus. Sed sagittis ante ac mauris egestas accumsan. Ut porttitor urna mi, vitae finibus sapien iaculis quis. Curabitur pretium gravida vestibulum. Fusce cursus tempor velit, id iaculis elit maximus sit amet. Curabitur
    condimentum sapien tristique ultricies ultricies. Aliquam id maximus ipsum. Phasellus vitae tincidunt dolor. Aliquam quam tortor, rhoncus vel eros porta, faucibus ullamcorper ex. Praesent hendrerit urna porta condimentum scelerisque. Quisque tellus
    tortor, bibendum in rutrum sed, condimentum sed libero. Suspendisse nunc urna, lobortis et ligula id, blandit venenatis magna. Proin ornare sem eu turpis sagittis suscipit. Quisque ligula risus, condimentum ac erat eleifend, porta blandit mi. Aliquam
    erat volutpat. Maecenas suscipit pretium erat, at lobortis lorem hendrerit eu. Aenean risus purus, tristique vel pulvinar a, imperdiet vel ex. Mauris faucibus congue arcu, nec efficitur dolor convallis et. Sed vel elit sed enim euismod semper. Praesent
    nec feugiat tortor. Donec lobortis congue nulla sed faucibus. Cras ut fringilla mi. Etiam nunc lacus, efficitur id mi ut, egestas tincidunt lectus. Integer eget egestas erat. Etiam nunc nulla, congue sit amet fringilla ut, vulputate eget neque. Sed
    et nisl at magna condimentum lacinia sodales ultricies dolor. Vestibulum ornare nunc turpis, non vulputate nunc aliquet a. Duis vel imperdiet elit, eu molestie augue. Morbi massa nibh, molestie eu leo vel, laoreet vestibulum lectus. Donec tincidunt,
    mi vel blandit volutpat, nisi est placerat risus, vitae fringilla nisi nibh sit amet neque. Donec ac interdum dolor. Donec at mollis sem. Praesent consequat erat et elit tempus sodales. Suspendisse aliquam elementum ipsum interdum finibus. Nullam
    at commodo elit. Morbi aliquet nec lacus sed lobortis. Morbi a lacus pellentesque, rutrum nulla ut, semper mauris. Cras congue sem scelerisque, tincidunt sapien a, fringilla eros. Pellentesque nibh sapien, mattis non feugiat nec, tempor vel mi. Donec
    ac placerat odio, nec commodo nisi. Phasellus ut massa ac enim vehicula pretium. Curabitur et nisl in turpis finibus hendrerit. Praesent in lacus ac mi eleifend rhoncus vel vitae dui. Aenean laoreet tortor sed lorem viverra egestas. Nunc congue at
    dui ut condimentum. Duis facilisis sed urna id imperdiet. Mauris id dolor risus. Pellentesque condimentum imperdiet magna sed ornare. Etiam ac nunc ipsum. Nam egestas sem eu justo semper, fermentum consectetur lacus viverra. Curabitur convallis venenatis
    leo, gravida dictum ante porta ac. In tristique ut lectus non eleifend. Donec aliquet ex nec nibh posuere, et rhoncus lacus rutrum. Vestibulum enim neque, ornare id risus et, interdum laoreet mauris. Nam nec odio consectetur, interdum lectus ut, vestibulum
    lectus. Praesent orci ligula, blandit sit amet orci in, sodales hendrerit massa. Praesent molestie ornare suscipit. Fusce dignissim iaculis enim, et accumsan magna ultrices ac. Mauris rutrum orci eu elit laoreet, sit amet vestibulum mauris tempor.
    Mauris lorem sapien, sodales eget ultrices nec, iaculis id ipsum. In fermentum lacus sed nisi fermentum faucibus. Pellentesque ut dapibus diam. Sed ac urna vitae nulla volutpat efficitur. Vivamus tortor ligula, consequat nec risus venenatis, mollis
    aliquet dolor. Sed diam augue, facilisis id interdum non, faucibus quis dolor. Mauris luctus purus metus, id auctor elit ultricies vitae. Maecenas ultrices lacus in felis dignissim porta. Phasellus at dolor in erat ultrices efficitur. In hac habitasse
    platea dictumst. Nam in varius tortor. Quisque est urna, vulputate ut sem non, pulvinar imperdiet leo. Nulla sodales vestibulum nibh in convallis. Donec mollis lectus sit amet eleifend dignissim. Morbi congue egestas tristique. Duis porta tortor in
    orci mollis, eget sagittis purus malesuada. Pellentesque in placerat sem. Sed tempus sem quis lorem congue, non pharetra erat fringilla. Curabitur elit leo, porttitor et consectetur quis, condimentum eget dolor. Integer urna sapien, auctor id hendrerit
    sed, fringilla id urna. Mauris blandit lacus elit, suscipit consectetur justo pharetra nec. Proin nibh lacus, aliquet non commodo iaculis, luctus vel ex. Integer in ligula non orci rutrum sodales. Nam nec facilisis augue, non auctor erat. Proin vulputate
    erat non erat vestibulum suscipit. Sed molestie diam urna, eget ornare lacus mattis non. Nulla suscipit egestas urna. In a orci quis libero rhoncus commodo at ac massa. Maecenas ac turpis justo. Nunc ut est sapien. Morbi sit amet nulla quis lorem
    consequat auctor sit amet at mauris. Donec aliquam convallis ligula, vitae luctus justo sagittis vitae. Integer aliquam mi vitae augue semper, non facilisis orci sagittis. Morbi vel nisl euismod felis congue aliquam. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas. Aenean tempor congue nisi, non hendrerit ante. Cras non fringilla risus, at varius lectus. Cras nec odio lectus. Pellentesque purus nisl, tincidunt id lorem sit amet, molestie molestie mi. Proin
    vel nunc volutpat sapien dignissim porta et in ipsum. Proin odio dui, hendrerit vel semper nec, rhoncus non nibh. Sed mattis facilisis fermentum. Praesent accumsan leo nec quam mattis, ac accumsan orci egestas. Curabitur vel magna et erat luctus faucibus.
    Suspendisse potenti. Donec porttitor ipsum quis mi mattis, sed varius sem finibus. Curabitur nec consequat lacus, vitae convallis nibh. Proin finibus sagittis molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo a nisi
    sed maximus. Etiam viverra eleifend tempus. Morbi mattis nisi quis tempor facilisis. In cursus a metus a imperdiet. Maecenas faucibus mauris nibh, eget mollis erat volutpat sit amet. Sed ut felis ut orci dictum condimentum. Ut lacus erat, volutpat
    et metus vitae, varius dapibus mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras aliquam auctor nunc vel bibendum. Donec hendrerit arcu vel massa mattis cursus. Pellentesque fermentum sagittis tellus,
    ut malesuada ligula aliquet ut. Vestibulum pharetra nulla ac lorem posuere lacinia. Aliquam erat volutpat. Etiam sed erat mattis, sollicitudin dui id, semper lectus. Curabitur convallis nunc vitae pellentesque pretium. Nullam suscipit ullamcorper
    orci, elementum bibendum augue gravida quis. Suspendisse lacinia eu risus eu ultrices. Phasellus sit amet rutrum ligula, sollicitudin molestie nibh. Quisque dictum tincidunt finibus. Fusce nec laoreet urna, ac ullamcorper turpis. Maecenas auctor,
    nisi eget ornare tempus, velit lorem aliquet libero, a pulvinar arcu risus sed diam. Curabitur iaculis lobortis lorem convallis pretium. Aenean vel massa in orci aliquet lobortis eget ut lectus. Curabitur euismod venenatis arcu, ut maximus velit egestas
    gravida. Donec interdum erat elit, congue accumsan elit tempor ac. Etiam finibus, magna ut bibendum feugiat, massa mi pretium turpis, eget tempor erat velit nec urna. Phasellus lobortis commodo elit, sed imperdiet ante efficitur vel. Duis magna augue,
    viverra ut enim non, lobortis malesuada nunc. Sed congue suscipit porttitor. Integer diam nisl, molestie id tellus eu, mattis aliquam nisl. Sed non lobortis turpis. Nullam vulputate feugiat neque, lobortis venenatis diam suscipit non. Nam a lacinia
    enim, ut venenatis nibh. Donec id consequat nisi. Suspendisse blandit tortor arcu, eu euismod neque consectetur at. Nunc ut eleifend risus, id sagittis nisl. Donec sem lacus, egestas id erat sit amet, fringilla efficitur nibh. Nulla sodales eleifend
    justo eget laoreet. Fusce non ipsum metus. Etiam egestas vestibulum maximus. Nullam id nisl id sem dictum finibus vel ac magna. Sed et purus in enim congue vehicula. Nam vel elit nisi. Nulla suscipit purus metus, eu fermentum risus viverra a. Proin
    at ullamcorper dolor. Nunc in tellus mi. Ut cursus ligula pretium, dignissim arcu sed, elementum orci. Cras blandit arcu massa. Donec ultricies ex eget tempus congue. Nunc finibus eget metus at sollicitudin. In consectetur lobortis sagittis. Sed ac
    turpis sit amet ante congue rutrum at id tellus. Ut lobortis, odio eget pharetra pellentesque, augue quam placerat ex, nec aliquet odio dolor nec diam. Suspendisse sollicitudin convallis nisi vel sollicitudin. Sed enim neque, tincidunt et urna porttitor,
    auctor accumsan arcu. Etiam purus libero, vestibulum eget posuere in, pretium eget ex. Vivamus eleifend porta dictum. Suspendisse finibus at diam imperdiet placerat. Nam scelerisque lacus id porttitor molestie. Suspendisse id facilisis velit. In in
    eros turpis. Ut non sollicitudin purus. Integer convallis dui non aliquam dictum. Donec tristique vulputate urna eu faucibus. Donec quis iaculis justo. Nulla facilisi. Donec vitae congue augue. Mauris vestibulum eros vitae metus facilisis, a tempor
    eros blandit. Proin pretium pretium luctus. Ut blandit orci nunc. Donec viverra neque quis enim faucibus mollis at non mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc blandit neque quis dignissim hendrerit. Aliquam mattis
    quis dui ut lobortis. Praesent nibh augue, egestas eu cursus quis, consectetur vel magna. Nunc convallis pharetra ipsum, ac finibus velit laoreet sit amet. Vivamus cursus, ante quis fringilla imperdiet, eros lacus feugiat elit, sed euismod risus lectus
    sit amet urna. Maecenas ut eros accumsan, dignissim ante in, dignissim velit. Etiam eget iaculis nisi. Nulla quis purus quis risus ultrices bibendum. Ut in dignissim magna, quis volutpat sapien. Mauris dictum fringilla purus et sodales. Nulla molestie,
    lorem at fermentum tincidunt, sem urna sagittis arcu, a faucibus nisl metus fringilla ligula. Aliquam a suscipit dui, pulvinar fermentum purus. Vestibulum sit amet laoreet ex, id tempor dolor. Proin cursus viverra arcu, et aliquam urna consequat ac.
    Integer dignissim, diam nec dictum maximus, nisl augue viverra purus, vitae posuere neque lorem vel odio. Nulla facilisi. Integer ac libero et sem pretium vestibulum eu vel nibh. Quisque pretium dui non dolor tempor suscipit. Vestibulum volutpat ligula
    eu est accumsan, eget pellentesque felis tincidunt. Nam quis varius orci, vulputate eleifend metus. Vestibulum quis luctus ligula. Pellentesque facilisis, orci nec gravida facilisis, nunc tellus sodales orci, vel vulputate ipsum diam sit amet elit.
    Praesent laoreet tellus mauris, tincidunt volutpat nibh semper quis. Suspendisse potenti. Maecenas suscipit arcu egestas laoreet iaculis. Pellentesque magna enim, tincidunt vitae orci eu, commodo luctus enim. Nam libero libero, pharetra nec ultrices
    ut, lacinia sed nisl. Mauris gravida justo quis erat pretium, non auctor lectus molestie. Ut consectetur mauris tellus, id consectetur est tempus eu. Fusce condimentum eu augue ut feugiat. Etiam ut nulla nisi. Etiam ullamcorper quam sagittis, consequat
    lorem a, pharetra nisi. Vestibulum ligula lacus, ultricies eget diam et, venenatis interdum magna. Morbi non arcu blandit, aliquam tellus eget, euismod lorem. Mauris vitae mi fermentum, aliquet est eu, hendrerit sem. Donec orci erat, elementum vitae
    feugiat a, sagittis id justo. Sed ut sem ultricies libero imperdiet vehicula. Sed id diam augue. Nullam at lectus id neque ultrices fringilla sed sit amet justo. Etiam non metus fermentum, imperdiet leo a, scelerisque lacus. Nunc nunc arcu, vestibulum
    non facilisis a, ultricies quis velit. Vestibulum sodales massa sit amet tortor convallis, sit amet porttitor lorem sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas dignissim odio ligula, sed varius purus venenatis quis.
    Donec at tortor molestie, lobortis odio ac, egestas diam. Nam porta lectus ac augue finibus, ac posuere felis ornare. Sed tempor orci ligula, vitae porta leo iaculis ut. Vestibulum malesuada tristique nisl sit amet eleifend. Quisque sollicitudin interdum
    leo, vitae vulputate sapien ultrices quis. Aliquam sed gravida lacus, vel venenatis ex. Pellentesque euismod diam non purus auctor vulputate. Curabitur at velit sit amet nisi aliquet suscipit non eget tortor. Sed sagittis fringilla magna in dictum.
    Aliquam aliquet a ligula eget aliquam. Vestibulum convallis tortor a odio congue scelerisque. Donec in egestas nisl. Quisque ac dui venenatis magna molestie viverra. Pellentesque vitae ante ultrices, pulvinar purus ut, condimentum magna. Integer sed
    metus urna. Ut suscipit scelerisque mauris eu blandit. Nam tincidunt cursus euismod. Fusce pharetra consectetur erat, et mollis velit elementum in. Suspendisse a mauris eu dui euismod rutrum. Curabitur eu magna rutrum, iaculis nibh eget, feugiat dui.
    Quisque nec est id mauris dignissim volutpat efficitur at leo. Suspendisse eget nulla sollicitudin, eleifend nunc at, viverra lectus. Fusce pharetra pretium quam, hendrerit aliquam magna condimentum nec. Aenean in lorem pretium, aliquet nisl ac, imperdiet
    nulla. Nulla sagittis semper eros consectetur scelerisque. Integer facilisis turpis sapien, non mollis mauris venenatis quis. Quisque gravida porttitor sodales. Duis ornare fringilla pretium. Phasellus vel neque eu sem vulputate scelerisque. Mauris
    sem eros, fringilla vel ligula et, ultricies sodales diam. Phasellus eget nisi et odio interdum sollicitudin ac non nibh. Quisque id ante non urna vestibulum luctus. Donec auctor eu nisi vitae accumsan. Aliquam erat volutpat. Duis eu convallis metus,
    sit amet pulvinar justo. Aliquam viverra luctus hendrerit. Etiam hendrerit, eros ut gravida accumsan, diam arcu pharetra mauris, ut facilisis nulla purus in risus. Integer id consectetur justo. Sed maximus hendrerit quam sit amet iaculis. Integer
    pellentesque sollicitudin nisl, sed molestie urna congue quis. Aenean sit amet eros tincidunt, maximus sem blandit, vehicula erat. Ut semper arcu arcu, a eleifend mauris rhoncus ac. Cras pellentesque tellus quis sapien pretium, non congue augue accumsan.
    Nam et vulputate erat. In hac habitasse platea dictumst. Nam a quam justo. Nullam in lorem in mauris pretium molestie vitae et ipsum. Nunc mattis blandit erat a posuere. Morbi lorem tellus, fringilla sed mattis ut, elementum id lacus. Duis dictum
    mauris non libero finibus ultrices. Vestibulum sit amet ipsum sodales, mollis odio quis, pellentesque erat. Phasellus ullamcorper nulla vel mollis aliquam. Nullam ligula neque, venenatis eu libero sit amet, mollis porttitor odio. Sed lobortis dui
    sit amet augue dapibus, rhoncus tempus sem euismod. Sed eros tellus, ornare ac felis nec, venenatis finibus arcu. In lobortis lobortis pretium. Aliquam a congue sapien. Sed vitae orci non lacus sollicitudin blandit. Cras vestibulum felis leo, sed
    interdum justo laoreet eget. Etiam porta sed odio in imperdiet. Donec nec sodales nunc. Nam mattis imperdiet arcu finibus porttitor. Ut at mi in mi commodo rhoncus tempor in magna. Etiam semper iaculis nunc, sit amet egestas nulla venenatis non. In
    hac habitasse platea dictumst. Maecenas nec pellentesque nunc. Curabitur sit amet nisl ut nisi malesuada tempus et ac mauris. Vivamus dapibus nisi et est sodales, eu rutrum orci ultrices. Aliquam tincidunt orci eu ornare venenatis. Ut sed maximus
    lorem, blandit fermentum felis. Aliquam lacinia odio ac purus tincidunt, ac tincidunt leo aliquam. Maecenas tristique dapibus dui vulputate pretium. Proin eget velit sed eros pellentesque hendrerit. Duis congue leo ac metus laoreet aliquet. Praesent
    pretium mauris a mauris iaculis hendrerit. Ut lorem lectus, facilisis a feugiat a, accumsan id sapien. Cras facilisis augue vitae urna interdum, ac porttitor neque viverra. Aenean tincidunt elementum mollis. Curabitur pulvinar urna sapien, rhoncus
    pulvinar ante accumsan id. Morbi in metus non arcu sagittis aliquam a quis mauris. Mauris risus ante, tristique in dapibus at, tempus eget ante. Sed faucibus sodales nisl. Quisque et ultricies velit, sed facilisis nisl. Integer feugiat quam vel accumsan
    viverra. Cras faucibus, augue ut rutrum vestibulum, dui lectus sagittis dui, varius accumsan sem eros quis urna. Ut odio mi, tempor a lectus non, volutpat tincidunt lacus. Sed laoreet ultrices hendrerit. In pellentesque, nulla ac tempor tempus, metus
    elit cursus justo, sit amet pulvinar est est vel est. Cras laoreet nibh leo, at porta nibh rhoncus vitae. Nunc pellentesque ullamcorper neque, vitae bibendum eros ullamcorper bibendum. Nulla malesuada tristique eleifend. Proin accumsan, dolor vel
    volutpat commodo, orci nisi fringilla ex, non aliquet turpis nunc id est.
  </article>
</body>

</html>

\$\endgroup\$
4
  • \$\begingroup\$ Why do you have a CSS reset in the first place? \$\endgroup\$
    – Mast
    Commented May 9, 2018 at 18:40
  • \$\begingroup\$ I styled my website on a css reset, it's also how I was taught. Without it my styles are slightly off. That wasn't my question at all. If this doesn't belong here I'll take it down. No need to nit pick around. \$\endgroup\$ Commented May 9, 2018 at 18:41
  • \$\begingroup\$ This is Code Review. The moment you upload your code, we'll nitpick it. Have you considered using a mature library like Bootstrap instead? \$\endgroup\$
    – Mast
    Commented May 9, 2018 at 19:13
  • \$\begingroup\$ Im not going to use bootstrap. Out of the picture. I don't want to use any frameworks for this site. And no not really man, I uploaded my code so my Header css can get reviewed, as stated in title and in the post. A css reset is used a lot, I just happen to use a bigger version of one that's usually in a reset.css file. Pretty basic css standard here when not using a framework. \$\endgroup\$ Commented May 9, 2018 at 19:24

2 Answers 2

2
\$\begingroup\$

The first thing I'd do with the CSS is to replace all the absolute "px" units with relative units, either "em" or "%", as appropriate.

(It really isn't good to make assumptions about the size of pixels on my screen.)

\$\endgroup\$
1
\$\begingroup\$

It's possible for #site-logo. Here I use flexbox instead. But #menu need to be fixed or absolute and #main-header needs to be fixed or sticky.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.