CSS和HTML叠加在移动设备上打开导航菜单时会轻微移动。

huangapple
go评论60阅读模式
英文:

CSS & HTML overlay moves slightly when opening nav menu on mobile

问题

I'm using CSS, HTML, and JavaScript with Bootstrap functions to create a responsive navbar menu that turns into a burger menu on smaller screens. However, when clicking the burger menu, the elements within the overlay move slightly to the top, including the "PENELOPE ATKINSON" logo and the burger menu/cross. I'm looking for a solution to prevent these elements from moving.

If you have any code-related questions or need further assistance, please feel free to ask.

英文:

I'm using CSS, HTML and Javascript with bootstrap functions to create a responsive navbar menu that turns to a burger menu when on smaller screens. Then when you click the burger menu, a full-screen overlay appears with the menu items.

What's happening though is that the elements within the overlay move a couple of pixels to the top when clicking on it, so the logo "PENELOPE ATKINSON" and the burger menu/cross move up a little.

Does anyone know how I can fix this so the elements in the overlay menu don't move? would be greatly appreciated!

In addition to bootstrap files, I will paste the files I'm using below because I'm not sure how else to share it on here.

test.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/normalize.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/browser_logo/browser_logo.png">
  </head>
  <body>

    <!--NAV BAR-->
    <div id="myNav" class="overlay">
        <div class="overlay-mobileMenu d-flex justify-content-between align-items-center gx-5 mt-4">
            <a href="index.html" class="nav-logo overlay-color" onclick="closeNav()">PENELOPE ATKINSON</a>
            <a href="#" class="closebtn overlay-menu-color" onclick="closeNav()">
                <img alt="cross" src="icons/cross.svg">
            </a>
            </div>
            <div class="overlay-menu">
            <ul class="no-bullets">
                <li><a href="graphic-design.html">GRAPHIC DESIGN</a></li>
                <li><a href="uxui-design.html">UX/UI DESIGN</a></li>
                <li><a href="about.html">ABOUT</a></li>
            </ul>
        </div>
    </div>
    <nav class="navbar d-flex justify-content-between align-items-center gx-5 mt-4">
        <a href="index.html" class="nav-logo">PENELOPE ATKINSON</a>
        <ul class="desktopMenu no-bullets">
            <li><a href="graphic-design.html">GRAPHIC DESIGN</a></li>
            <li><a href="uxui-design.html">UX/UI DESIGN</a></li>
            <li><a href="about.html">ABOUT</a></li>
        </ul>
        <a href="#" class="mobileMenu" onclick="openNav()">
            <img alt="burger-menu" src="icons/burger-menu.svg">
        </a>
    </nav>
    
    <script src="/bootstrap/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="/js/main.js"></script>

  </body>
</html>

main.js


function openNav(){
    document.getElementById("myNav").style.height = "100%";
}

function closeNav(){
    document.getElementById("myNav").style.height = "0%";
}

window.onload = function() {

    var pageTitle = document.title;
    var attentionMessage = 'Come back!';
    var blinkEvent = null;
  
    document.addEventListener('visibilitychange', function(e) {
      var isPageActive = !document.hidden;
  
      if(!isPageActive){
        blink();
      }else {
        document.title = pageTitle;
        clearInterval(blinkEvent);
      }
    });
  
    function blink(){
      blinkEvent = setInterval(function() {
        if(document.title === attentionMessage){
          document.title = pageTitle;
        }else {
          document.title = attentionMessage;
        }
      }, 100);
    }
  };

styles.css

@import url('https://fonts.googleapis.com/css2?family=News%20Cycle&display=swap');
@import url("https://use.typekit.net/uzc8mug.css");
@font-face {
font-family: 'Baptiste-Regular';
src: url('/fonts/Baptiste-Regular.eot');
src: url('/fonts/Baptiste-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Baptiste-Regular.svg#Baptiste-Regular') format('svg'),
url('/fonts/Baptiste-Regular.ttf') format('truetype'),
url('/fonts/Baptiste-Regular.woff') format('woff'),
url('/fonts/Baptiste-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
margin: 0 0;
padding: 0 0;
box-sizing: border-box;
overflow: auto;
}
.padding-main img {
width: 100%;
height: 70vh ;
}
html {
font-size: 62.5%;
}
body {
background-color: #F3F3F3;
font-family: 'acumin-pro', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2rem;
color: black;
overflow-x: hidden;
overflow-y: hidden;
overflow: hidden;
}  
p { 
text-indent: 10rem;
margin: 0;  
}
p:first-of-type {
text-indent: 0;
}
.larger-text {
font-size: 3rem;
}
.left-side-text {
position: absolute;
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
transform-origin: top left;
transform: rotate(-90deg);
left: 1%;
top: 50%;
color: black;
font-size: 1.2vw;
font-weight: 600;
padding-left: 20px;
padding-right: 20px;
opacity: 0;
visibility: hidden;
}
.right-side-text {
position: absolute;
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
transform:rotate(90deg);
top: 45%;
right: -4%;
color: black;
font-size: 1.2vw;
font-weight: 600;
padding-left: 20px;
padding-right: 20px;
opacity: 0;
visibility: hidden;
}
.padding-main {
padding: 2rem 2.5rem;
}
.padding-text {
padding: 0 8vw;
}
.padding-top{
padding-top: 15vh;
}
.pb-6 {
padding-bottom: 6rem;
}
.pb-8 {
padding-bottom: 7rem;
}
.nopadding {
padding: 0 !important;
}
.homescreen-intro {
font-family: 'Baptiste-Regular', serif;
font-size: 9rem;
text-align: left;
margin: 48vh 0 0 0;
line-height: 1.2;
}
.about-intro {
font-family: 'Baptiste-Regular', serif;
font-size: 7rem;
text-align: left;
margin: 10vh 0 10vh 0;
line-height: 1.2;
}
.project-intro {
font-family: 'Baptiste-Regular', serif;
font-size: 7rem;
text-align: left;
margin: 7vh 0 7vh 0;
line-height: 1.2;
}
.about-text {
font-size: 1.9rem;
font-weight: 300;
}
.contact-info {
font-size: 2rem;
}
.white {color: white!important;}
.mt-6 {
margin-top: 6rem; 
}
.mt-7 {
margin-top: 7rem; 
}
.mt-8 {
margin-top: 8rem; 
}
.mt-9 {
margin-top: 9rem; 
}
.mt-10 {
margin-top: 10rem; 
}
.pe-6 {
padding-right: 8rem; 
}
.pb-6 {
padding-bottom: 8rem; 
}
.pb-7 {
padding-bottom: 7rem; 
}
.pb-10 {
padding-bottom: 10rem; 
}
hr {
border: none;
border-top: 1px solid #000000;
opacity: 1;
}
.asterisk {
vertical-align: -30%;
font-size: 14rem;
}
div h1 {
font-size: 1.5rem;
line-height: 1.2;
text-align: left;
padding-bottom: 1vh;
font-weight: 600;
letter-spacing: 0;
}
ul {
padding: 0;
margin: 0;
}
.no-bullets {
list-style-type: none;
}
li:not(:last-child) {
margin-bottom: 1rem;
}
.about-icons {
font-size: 7rem;
line-height: 7rem;
height: 7rem;
vertical-align: -40%;
}
.icons {
font-family: monospace; 
}
.underline-dot {
text-decoration: underline dotted 2px; 
text-underline-offset: 0.5rem;
color: black;
}
.underline-solid {
text-decoration: underline 2px; 
text-underline-offset: 0.5rem;
color: black;
}
.styled li {
padding-left: 1rem;
text-indent: -1rem;
}
ol {
list-style-position: inside;
}
ul {
list-style-position: inside;
}
.keep-together {
white-space: nowrap ;
}
a {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
.page_active {
text-decoration: none;
}
.pic {
position: relative;
overflow: hidden;
}
.imgtext {
box-sizing: border-box;
display: inline;
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
color: black;
font-weight: light;
font-size: 2rem;
opacity: 0;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
h1::before { 
display: block; 
content: " "; 
margin-top: -200px; 
height: 200px; 
visibility: hidden; 
pointer-events: none;
}
.image_gallery {
object-fit: cover;
}
.align {
display: flex;
align-items: flex-end;
}
.align-bottom {
display: flex;
align-items: flex-end;
}
.row {
margin-left: 0px;
margin-right: 0px;
padding: 0 0;
}
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
.footer {
align-items: left;
padding: 10vh 0 10vh 0;
background-color: #E8E7DE;
font-size: 1.9rem;
font-weight: 400;
}
.footer ul {
padding:0;
}
.margin-top{
margin-top: 40vh;
}
.g-10{
padding: 5rem;
}
/* NAVBAR - main */
.navbar {
top: 0;
left: 0;
width: 100%;
position: fixed;
z-index: 1;
background-color: #F3F3F3;
}
.nav-logo {
font-size: 2.5rem;
letter-spacing: 0;
display: flex;
align-items: center;
}
.desktopMenu li {
font-size: 2.5rem;
letter-spacing: 0;
display: inline;
text-align: center;
padding: 20px;
}
.mobileMenu{
display: none; 
cursor: pointer;
padding: 0;
}
/* NAVBAR - overlay */
.overlay {
height: 0%;
width: 100%;
left: 0;
top: 0;
position: fixed;
z-index: 9999999;
background-color: #E8E7DE;
overflow: hidden;
} 
.closebtn{
cursor: pointer;
height: 3.5rem;
width: 3.5rem;
padding: 0;
display:block; 
}
.overlay-mobileMenu-color {
filter: invert(0%) sepia(0%) saturate(20%) hue-rotate(324deg) brightness(106%) contrast(105%);
}
.overlay-color {
color:  black !important;    
}
.overlay-mobileMenu {
position: relative;
top: 0;
left: 0;
}
.overlay-menu {
position: relative;
padding: 0 2.5rem;
top: 20%;
width: 100%;
text-align: center;
}
.overlay-menu li {
margin: 30px;
padding: 0px;
}
.overlay-menu li a {
color: black;
font-size: 2.5rem;
margin: 0.5rem;
font-weight: 600;
letter-spacing: 0;
}
.overlay-mobileMenu .mobile, .navbar .mobile {
display: none;
}
.full-width-image {
display: block;
height: auto;
max-width: 100%;
}
@media (hover: hover) and (pointer: fine) {
.pic:hover .right-side-text {
visibility: visible;
opacity: 1;
}
.pic:hover .left-side-text {
visibility: visible;
opacity: 1;
}
a:hover {
text-decoration: underline solid 1px;
text-decoration-thickness: 0.1rem;
text-underline-offset: 0.5rem;
color: black;
}
.prototype:hover {
filter: brightness(107%);
}
}
@media only screen and (max-width: 1000px) {
a:hover {
text-decoration: none;
color: black;
}
.padding-main{
padding: 2rem 2.5rem;
}
.margin-main {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.margin-top{
margin-top: 15vh;
}
/* NAVBAR - main */
.mobileMenu{
display: block;
height: 3rem;
width: 3rem;
}
.desktopMenu {
display: none;
overflow: hidden;
}
.overlay-mobileMenu .mobile, .navbar .mobile {
display: block;
}
.overlay-mobileMenu .desktop, .navbar .desktop {
display: none;
}
.homescreen-intro {
margin-top: 10vh;
margin-bottom: 0;
padding-bottom: 0;
font-size: 4.5rem;
text-align: left;
line-height: 1.2;
}
.asterisk {
vertical-align: -30%;
font-size: 9rem;
line-height: 11rem;
height: 9rem;
}
.footer {
align-items: left;
padding: 8vh 0 8vh 0;
background-color: #F3F2E9;
}
.align-center {
text-align: center;
}
.align-center ul { 
display: inline-block;
text-align: left;
}
.footer-list li {
padding-top: 10px;
}
}  
.gx-5 {
padding-left: 5rem;
padding-right: 5rem;
}

答案1

得分: 1

我用py-5代替mt-5解决了这个问题！不确定为什么这样能解决，但它确实解决了，我很开心:D

英文:

Ah I solved it by using py-5 instead of mt-5! Not sure how that solves it but it did and I'm happy CSS和HTML叠加在移动设备上打开导航菜单时会轻微移动。

huangapple
  • 本文由 发表于 2023年5月23日 00:38:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76308289.html
  • bootstrap-4
  • css
  • navbar
  • overlay
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定