基于现有代码的简单响应式网站标题 [英] Simple responsive website header based on existing code

问题描述

我最初在其他地方问过这个问题但是代码已被修改并修剪下来，以便更容易使用，因此重新发布。

  body，html {max-width：100％;填充：0vw; margin：0vw;}。header {background-color：#ffffff; position：fixed; top：0％; left：0％; right：0％; height：10vh; z-index：1; border-bottom：solid; } .headerfill {height：10vh; border：none;}。header-container {width：100％; height：auto; display：flex; flex-flow：row nowrap; justify-content：center; margin：auto; margin- left：auto; margin-right：auto;}。logo-container {float：left; width：40％; padding-left：1vh; display：flex; flex-flow：row nowrap; justify-content：left;}。导航容器{宽度：60％;显示：flex; flex-flow：row nowrap; // justify-content：空间均匀;保证金：自动; margin-left：auto; margin-right：auto; text-align：center;} .space-uniformity {justify-content：space-uniformity;}。logo {height：8vh; max-width：80vw; padding-top：1vh; padding-bottom：1vh; padding-left：4vh; display：block; object-fit：contains;} img {-webkit-user-drag：none;}。nav {font-family：'Roboto '，serif; font-size：2vw; text-align：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em ; object-fit：contains; text-decoration：none;} @ media only screen and（max-width：500px）{。nav {font-family：'Roboto'，serif; font-size：2.5vw; text-align ：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em; object-fit：contains; text-decoration：none; nav：hover {color：＃096e67;} a：link {color：＃000000; text-decoration：none;} h1 {font-family：'Roboto'，serif; font-size：4vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding- left：4vh; padding-right：2vh; padding-bottom：0.5vh; line-height：1em;} @ media only screen and（max-width：500px）{h1 {font-family：'Roboto'，serif; font -size：8vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding-left：2vh; padding-right：2vh; padding-bottom：0.5vh; line-height ：1em;}}  

 < html lang =en -GB>< head>< meta charset =utf-8/>< title>网站标题< / title>< meta name =viewportcontent =width = device-width，initial -scale = 1.0>< link href =https://fonts.googleapis.com/css?family=Roboto\"rel =stylesheet>< / head>< body>< div class = header>< div class =header-container>< div class =logo-container>< img class =logosrc =/ logo.pngalt =Logo >< / div>< div c lass =navigation-container space-uniformity>< p class =nav> Page1< / p>< p class =nav> Page2< / p>< p class =nav > Page3< / p>< p class =nav> Page4< / p>< / div>< / div>< / div>  

我最初设置它两个标题，只是将桌面一个隐藏在移动设备上，移动设备放在桌面上。我不能这样做，只需要微小的调整。只需要功能。

我知道我可以使用一个按钮（然后样式显示☰和✘）但我不知道如何使用同一页面移动和桌面上的链接都是响应式的。您可以将我的代码复制到您的答案中，我知道我可能需要听众和JavaScript，但我无法用我已有的设计弄明白。

在此先感谢：）

 更新
  

下面是我需要发生的功能概念，我不知道如何将它融入我的设计中。

  let menu = document.querySelector（'nav'）document.querySelector（'button'）。addEventListener（'click'，e => {menu .classList.toggle（'active'）}） 

  header {position：relative;显示：flex;背景：#ccc; justify-content：space-between;} nav {display：flex;} nav a {display：block;填充：10px;背景：#ddd; border：1px solid #aaa;} button {display：none;} @ media（max-width：400px）{nav {position：absolute;上：100％;左：0;右：0; text-align：right; display：none; } nav.active {display：block; } button {display：block; }  

 < header> < a href =class =logo> logo< / a> <按钮>菜单< /按钮> < NAV> < a href => Page1< / a> < a href => Page2< / a> < a href => Page3< / a> < a href => Page4< / a> < / nav>< / header>  

我需要与上面的图片和我的初始代码段中的设计相匹配的功能。

 更新2 
  

进度：

这个想法是复制外观移动网站，只有一个响应标头。我试过有两个版本的标题。它可以通过将桌面设备隐藏在移动设备上，将移动设备隐藏在桌面设备上，因此代码已经发生了重大改变。

我现在需要的只是☰按钮在桌面和中查看时隐藏Page 1 Page3 Page3 Page4 | 隐藏在移动设备上但单击按钮时会出现一个包含页面列表的下拉列表。我可以在:: 之后使用 Before :: 和，但我尝试使用事件监听器而不是使用 Bootstrap 因为我不是那么熟悉。

代码如下：

  body，html {max-width：100 ％;填充：0vw; margin：0vw;}。header {background-color：#ffffff; position：fixed; top：0％; left：0％; right：0％; height：10vh; z-index：1; border-bottom：solid; } .headerfill {height：10vh; border：none;}。header-container {width：100％; height：auto; display：flex; flex-flow：row nowrap; justify-content：center; margin：auto; margin- left：auto; margin-right：auto;}。logo-container {float：left; width：40％; padding-left：1vh; display：flex; flex-flow：row nowrap; justify-content：left;}。导航容器{宽度：60％;显示：flex; flex-flow：row nowrap; // justify-content：空间均匀;保证金：自动; margin-left：auto; margin-right：auto; text-align：center;} .space-uniformity {justify-content：space-uniformity;}。logo {height：8vh; max-width：80vw; padding-top：1vh; padding-bottom：1vh; padding-left：4vh; display：block; object-fit：contains;} img {-webkit-user-drag：none;}。nav {font-family：'Roboto '，serif; font-size：2vw; text-align：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em ; object-fit：contains; text-decoration：none;} @ media only screen and（max-width：500px）{。nav {font-family：'Roboto'，serif; font-size：2.5vw; text-align ：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em; object-fit：contains; text-decoration：none; nav：hover {color：＃096e67;} a：link {color：＃000000; text-decoration：none;} h1 {font-family：'Roboto'，serif; font-size：4vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding- left：4vh; padding-right：2vh; padding-bottom：0.5vh; line-height：1em;} @ media only screen and（max-width：500px）{h1 {font-family：'Roboto'，serif; font -size：8vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding-left：2vh; padding-right：2vh; padding-bottom：0.5vh; line-height ：1em;}}  

 < html lang =en -GB>< head>< meta charset =utf-8/>< title>网站标题< / title>< meta name =viewportcontent =width = device-width，initial -scale = 1.0>< link href =https://fonts.googleapis.com/css?family=Roboto\"rel =stylesheet> < link rel =stylesheethref =./ stylesheet3.2.css>< / head>< body>< header>< div class =header>< div class = header-container>< div class =logo-container>< img class =logosrc =/ logo.pngalt =Logo>< / div>< div class =导航容器空间均匀><按钮>☰< /按钮>< p class =nav> Page1< / p>< p class =nav> Page2< / p> ;< p class =nav> Page3< / p>< p class =nav> Page4< / p>< / div>< / div>< / div>< / header> ;< script> let menu = document.querySelector（'nav'）document.querySelector（'button'）。addEventListener（'click'，e => {menu.classList.toggle（'active'）}）< / script>  

我认为这与班级名单有关吗？单击按钮时我可以显示页面，但这样做会使桌面上的设计混乱，并且页面名称不再水平显示。您应该能够将我的代码复制到您的答案中，或者只是提供一些指导。任何事情都会受到赞赏，我花了好几个小时就无法使用它。

希望上面的图片有所帮助，请制作我创建的代码这是我希望选择的设计和我坚持的设计。页面设置为以500px显示按钮，媒体查询如果有人能告诉我为什么这不起作用那就太棒了。

剩下要做的就是;让按钮隐藏在桌面上，让按钮显示在手机上和手机上点击按钮显示页面列表，就像在图像中一样。使用< nav>< / nav> 标记包装页面列表会破坏桌面格式。

小提琴最新版本小提琴的最新版本（带按钮）

我被困住了，请帮忙。在此先感谢：）

 更新3 
  

我已经设法获得了一些功能，但是下拉菜单本身没有样式，现在页面标题也在桌面上堆叠。图标也不会切换。

  body，html {max-width ：100％;填充：0vw; margin：0vw;}。header {background-color：#ffffff; position：fixed; top：0％; left：0％; right：0％; height：10vh; z-index：1; border-bottom：solid; } .headerfill {height：10vh; border：none;}。header-container {width：100％; height：auto; display：flex; flex-flow：row nowrap; justify-content：center; margin：auto; margin- left：auto; margin-right：auto;}。logo-container {float：left; width：40％; padding-left：1vh; display：flex; flex-flow：row nowrap; justify-content：left;}。导航容器{宽度：60％;显示：flex; flex-flow：row nowrap; // justify-content：空间均匀;保证金：自动; margin-left：auto; margin-right：auto; text-align：center;} .space-uniformity {justify-content：space-uniformity;} media only screen and（max-width：500px）{。navavigation-container {width：60％;显示：flex; flex-flow：row nowrap; // justify-content：空间均匀;保证金：自动; margin-left：auto; margin-right：auto; text-align：center;} .space-uniformity {justify-content：space-uniformity;} nav.active {display：block; } .logo {height：8vh; max-width：80vw; padding-top：1vh; padding-bottom：1vh; padding-left：4vh; display：block; object-fit：contains;} img {-webkit-user-drag：none;}。nav {font-family：'Roboto '，serif; font-size：2vw; text-align：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em ; object-fit：contains; text-decoration：none;} @ media only screen and（max-width：500px）{。nav {font-family：'Roboto'，serif; font-size：2.5vw; text-align ：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em; object-fit：contains; text-decoration：none; nav：hover {color：＃096e67;} a：link {color：＃000000; text-decoration：none;} h1 {font-family：'Roboto'，serif; font-size：4vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding- left：4vh; padding-right：2vh; padding-bottom：0.5vh; line-height：1em;} @ media only screen and（max-width：500px）{h1 {font-family：'Roboto'，serif; font -size：8vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding-left：2vh; padding-right：2vh; padding-bottom：0.5vh; line-height ：1em;}} button {display：none; } @media（max-width：500px）{nav {position：absolute;上：100％;左：0;右：0; text-align：right; display：none; } nav.active {display：block; } button {display：block; }  

 < html lang =en-GB >< head>< meta charset =utf-8/>< title>网站标题< / title>< meta name =viewportcontent =width = device-width，initial-scale = 1.0>< link href =https://fonts.googleapis.com/css?family=Roboto\"rel =stylesheet>< / head>< body>< header>< div class =header>< div class =header-container>< div class =logo-container>< img class =logosrc =/ logo.pngalt =Logo >< / div>< div class =navigation-container space-uniformity>< button>☰< / button>< nav>< p class =nav> Page1< / p>< p class =nav> Page2< / p>< p class =nav> Page3< / p>< p class =nav> Page4< / p>< / nav>< / div>< / div>< / div>< / header>< script> let menu = document.querySelector（'nav'）document.querySelector（'button'）。addEventListener（'click '，e => {menu.cl assList.toggle（'active'）}）< / script>  

<它几乎就在那里。请帮忙，我们将不胜感激：）

 更新4 
  

我已经按下了水平对齐的按钮。

我的最终代码是;

  body，html {max-width：100％;填充：0vw; margin：0vw;}。header {background-color：#ffffff; position：fixed; top：0％; left：0％; right：0％; height：10vh; z-index：1; border-bottom：solid; display：flex; justify-content：space-between;}。headerfill {height：10vh; border：none;}。header-container {width：100％; height：auto; display：flex; flex-flow：row nowrap; justify-content：center; margin：auto; margin-left：auto; margin-right：auto;}。logo-container {float：left; width：40％; padding-left：1vh; display：flex; flex-flow ：row nowrap; justify-content：left;}。navigation-container {width：60％;显示：flex; flex-flow：row nowrap; // justify-content：空间均匀;保证金：自动; margin-left：auto; margin-right：auto; text-align：center;} .space-uniformity {justify-content：space-uniformity;}。logo {height：8vh; max-width：80vw; padding-top：1vh; padding-bottom：1vh; padding-left：4vh; display：block; object-fit：contains;} img {-webkit-user-drag：none;}。nav {font-family：'Roboto '，serif; font-size：2vw; text-align：center; margin-top：auto; margin-bottom：auto; color：＃000000; padding-left：auto; padding-right：auto; line-height：1em ; object-fit：contains; text-decoration：none;} @ media only screen and（max-width：500px）{。nav {font-family：'Roboto'，serif; font-size：8vw; text-align： left; margin-top：2vh; margin-bottom：auto; color：＃000000; padding-left：2vh; padding-right：auto; line-height：1em; object-fit：contains; text-decoration：none;} } .nav：hover {color：＃096e67;} a：link {color：＃000000; text-decoration：none;} h1 {font-family：'Roboto'，serif; font-size：4vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding- left：4vh; padding-right：2vh; padding-bottom：0.5vh; line-height：1em;} @ media only screen and（max-width：500px）{h1 {font-family：'Roboto'，serif; font -size：8vw; text-align：left; margin-top：0px; margin-bottom：0px; color：＃000000; padding-left：2vh; padding-right：2vh; padding-bottom：0.5vh; line-height ：1em;}} nav {display：flex;宽度：100％;证明内容：空间均匀; margin-right：auto; text-align：right;导航一个{display：block;填充：10px; font-family：'Roboto'，serif; font-size：2vw; text-align：left; margin-top：auto; margin-bottom：auto;颜色：＃000000; padding-left：auto; padding-right：auto; line-height：1em;对象：包含; text-decoration：none; } {{display：none！important; } @media（max-width：400px）{nav {position：absolute;上：100％;左：0;右：0; display：none; font-family：'Roboto'，serif; font-size：2.5vw; margin-top：auto; margin-bottom：auto;颜色：＃000000; padding-left：auto; padding-right：auto; line-height：1em;对象：包含; text-decoration：none; } nav.active {display：block;我{显示：阻止！重要;保证金：5px的; }  

 < html lang =en-GB >< head>< meta charset =utf-8/>< title>网站标题< / title>< meta name =viewportcontent =width = device-width，initial-scale = 1.0>< link href =https://fonts.googleapis.com/css?family=Roboto\"rel =stylesheet>< link rel =stylesheethref =https：// cdnjs。 cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"></head><body><header><div class =header> ;< div class =header-container>< div class =logo-container>< img class =logosrc =/ logo.pngalt =Logo>< / div>< div class =navigation-container space-uniformity>< nav>< p class =nav> Page1< / p>< p class =nav> Page2< / p>< p class =nav> Page3< / p>< p class =nav> Page4< / p>< / nav>< i class =fa fa-bars> < / i>< / div>< / div>< / div>< / header>< script> menu = document.querySelector（ NAV）; document.querySelector（'i'）。addEventListener（'click'，e => {menu.classList.toggle（'active'）document.querySelector（'header i'）。classList.toggle（'fa-bars'） document.querySelector（'header i'）。classList.toggle（'fa-times'）}）< / script>  

我只是想知道为什么在调整浏览器窗口大小时文本变得更大？我有两次定义的东西还是我没有发现多余的代码？谢谢。

解决方案

你的功能性想法绝对有效。我只是通过fontawesome介绍按钮图标。

 < link rel =stylesheethref =https：//cdnjs.cloudflare的.com / AJAX /库/字体真棒/ 4.7.0 / CSS /字体awesome.min.css> 
< style> 
 header {
 position：relative; 
 display：flex; 
背景：#ccc; 
 justify-content：space-between; 
} 
 nav {
 display：flex; 
} 
导航{
 display：block; 
填充：10px; 
背景：#ddd; 
 border：1px solid #aaa; 
} 
按钮{
 display：none; 
} 
 
 @media（最大宽度：400px）{
 nav {
 position：absolute; 
 top：100％; 
左：0; 
右：0; 
 text-align：right; 
 display：none; 
} 
 nav.active {
 display：block; 
} 
按钮{
 display：block; 
} 
} 
 
< / style> 
< header> 
< a href =class =logo> logo< / a> 
< button>< i class =fa fa-bars>< / i>< / button> 
< nav> 
< a href => Page1< / a> 
< a href => Page2< / a> 
< a href => Page3< / a> 
< a href => Page4< / a> 
< / nav> 
< / header> 
< script> 
 menu = document.querySelector（'nav'）; 
 document.querySelector（'button'）
 .addEventListener（'click'，e => {
 menu.classList.toggle（'active'）
 document.querySelector（ 'button i'）。classList.toggle（'fa-bars'）
 document.querySelector（'button i'）。classList.toggle（'fa-times'）
}）
 < /脚本> 
  

I initially asked this elsewhere but the code has since been modified and trimmed down to make it easier to work with hence reposting.

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>

I initially set it up with two headers and just hid the desktop one on mobile and the mobile one on the desktop. I can't do this and it only needs minor adjustments. Just need the functionality.

I know that I could use a button (then style to show the ☰ and ✘) but I don't know how to use the same page links on both mobile and desktop to be responsive. You can just copy my code to your answer, I know I'll likely need listeners and JavaScript but just can't figure it out with the design I already have.

Thanks in advance :)

UPDATE

Below is a functional idea of what I need to happen, I have no idea how to incorporate it into my design.

let menu = document.querySelector('nav')
document.querySelector('button')
	.addEventListener('click', e => {
  	menu.classList.toggle('active')
  })

header{
  position: relative;
  display: flex;
  background: #ccc;
  justify-content: space-between;
}
nav{
  display: flex;
}
nav a{
  display: block;
  padding: 10px;
  background: #ddd;
  border: 1px solid #aaa;
}
button{
  display: none;
}

@media (max-width: 400px) {  
  nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: right;
    display: none;
  }
  nav.active{
    display: block;
  }
  button{
    display: block;
  }
}

<header>
  <a href="" class="logo">logo</a>
  <button>menu</button>
  <nav>
    <a href="">Page1</a>
    <a href="">Page2</a>
    <a href="">Page3</a>
    <a href="">Page4</a>
  </nav>
</header>

I need the functionality of that to match with the image above and the design in my initial code snippet.

UPDATE 2

Progress:

The idea for this is to replicate the look of mobile websites and have just one responsive header. I'd tried having two versions of the header. It would've worked by hiding the desktop one on mobile and the mobile one on desktop, hence the repost as the code has changed significantly enough.

All I need now is for the ☰ button to be hidden when in view on desktop and the | Page1 Page2 Page3 Page4 | to be hidden on mobile but when the button is clicked there would be a drop-down with the page list. I could use Before:: and after:: but I've attempted this with an event listener rather than using Bootstrap as I'm not all that familiar.

The code is as follows:

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <link rel="stylesheet" href="./stylesheet3.2.css">
</head>
<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button>☰</button>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
</header>

<script>
let menu = document.querySelector('nav')
document.querySelector('button')
	.addEventListener('click', e => {
  	menu.classList.toggle('active')
  })
</script>

I think it's something to do with class lists? I can get pages to appear when the button is clicked although doing so messes with the design on the desktop and the page names no longer display horizontally. You should be able to copy my code to your answer, or just provide some guidance. Anything would be appreciated, I've spent hours on this and can't get it to work.

Hopefully the image above will help, please make the code I have created functional as this is the design I wish to opt for and the one that I am sticking with. The page is set to show the button at 500px with media queries If someone could tell me why this isn't working that'd be amazing.

All that's left to do is to; get the button to hide on desktop, get the button to display on mobile and on mobile make clicking the button display the page list, like in the image. Wrapping the page list with <nav></nav> tags ruins the desktop formatting.

Fiddle of the latest version Fiddle of the latest version (with button)

I'm stuck, please help. Thanks in advance :)

UPDATE 3

I've managed to obtain some functionality but there is no styling on the drop-down itself and now the page titles stack on desktop too. The icons also don't switch.

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}


media only screen and (max-width: 500px) {
.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}
nav.active{
            display: block;
        }
        }
    

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
   
    button{
        display: none;
    }

    @media (max-width: 500px) {
        nav{
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            text-align: right;
            display: none;
        }
        nav.active{
            display: block;
        }
        button{
            display: block;
        }
    }

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button>☰</button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
</header>

<script>
let menu = document.querySelector('nav')
document.querySelector('button')
	.addEventListener('click', e => {
  	menu.classList.toggle('active')
  })
</script>

It's almost there. Please help, it would be appreciated :)

Update 4

I've got the button back with the horizontal alignment.

The final code I have is;

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}

.headerfill {
height: 10vh;
border: none;
}

.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}

.logo {
height:8vh;
max-width: 80vw; 
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}

img{
-webkit-user-drag: none;
}

.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}


@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}

.nav:hover {
color: #096e67;
}

a:link {
    color: #000000;
    text-decoration: none;
}

h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}


    nav{
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        margin-right: auto;
        text-align: right;
    }
    nav a{
        display:block;
        padding: 10px;
        font-family: 'Roboto', serif;
        font-size: 2vw;
        text-align: left;
        margin-top: auto;
        margin-bottom: auto;
        color: #000000;
        padding-left: auto;
        padding-right: auto;
        line-height: 1em;
        object-fit: contain;
        text-decoration: none;
    }
    i{
        display: none !important;
    }
 
    @media (max-width: 400px) {
        nav{
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;

            display: none;

            font-family: 'Roboto', serif;
            font-size: 2.5vw;
            margin-top: auto;
            margin-bottom: auto;
            color: #000000;
            padding-left: auto;
            padding-right: auto;
            line-height: 1em;
            object-fit: contain;
            text-decoration: none;
        }
        nav.active{
            display: block;
        }
        i{
            display: block!important;
            margin:5px;
        }
    }

<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>

<script>
menu = document.querySelector('nav');
    document.querySelector('i')
        .addEventListener('click', e => {
        menu.classList.toggle('active')
    document.querySelector('header i').classList.toggle('fa-bars')
    document.querySelector('header i').classList.toggle('fa-times')
    })
</script>

I just wonder why when resizing the browser window at points the text goes much larger? is there something I've defined twice or is there redundant code I've not spotted? Thanks.

解决方案

Your "functional idea" definitely works. I just introduce button icons via fontawesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    header{
        position: relative;
        display: flex;
        background: #ccc;
        justify-content: space-between;
    }
    nav{
        display: flex;
    }
    nav a{
        display: block;
        padding: 10px;
        background: #ddd;
        border: 1px solid #aaa;
    }
    button{
        display: none;
    }

    @media (max-width: 400px) {
        nav{
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            text-align: right;
            display: none;
        }
        nav.active{
            display: block;
        }
        button{
            display: block;
        }
    }

</style>
<header>
    <a href="" class="logo">logo</a>
    <button><i class="fa fa-bars"></i></button>
    <nav>
        <a href="">Page1</a>
        <a href="">Page2</a>
        <a href="">Page3</a>
        <a href="">Page4</a>
    </nav>
</header>
<script>
    menu = document.querySelector('nav');
    document.querySelector('button')
        .addEventListener('click', e => {
        menu.classList.toggle('active')
    document.querySelector('button i').classList.toggle('fa-bars')
    document.querySelector('button i').classList.toggle('fa-times')
    })
</script>

这篇关于基于现有代码的简单响应式网站标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！