如何将汉堡菜单图标放在标题的右侧？
[英]How do I place my Hamburger Menu icon on the right side of my Title?
问题描述
How do I place my hamburger menu icon on the right side of my Webpage name?
如何将汉堡菜单图标放在网页名称的右侧？ So it would look like this: (Hamburger Icon) Tools所以它看起来像这样：（汉堡图标）工具
The image below shows the word "Tool" overlaps with the Hamburger icon.下图显示“工具”一词与汉堡图标重叠。 I want them side by side.我要他们并排。 I've tried placing the hamburger and the word into separate container but it didn't came out right.我尝试将汉堡包和单词放入单独的容器中，但结果不正确。
Below the images, are my current codes.图片下方是我当前的代码。
Current Navbar当前导航栏
Wanted Navbar通缉导航栏
* { margin: 0; padding: 0; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked+.menu__btn>span { transform: rotate(45deg); } #menu__toggle:checked+.menu__btn>span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked+.menu__btn>span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked~.menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 20px; left: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn>span, .menu__btn>span::before, .menu__btn>span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: .25s; } .menu__btn>span::before { content: ''; top: -8px; } .menu__btn>span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); transition-duration: .25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #CFD8DC; }
<nav class="navbar navbar-expand-lg navbar-custom"> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> <h1>Tools</h1> </nav>
4 个解决方案
解决方案1
0 2022-07-17 14:35:45
body { margin: 0px; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 32px; left: 30px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: 0.25s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; } .menu__box { display: block; position: fixed; top: 0; right: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #eceff1; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); transition-duration: 0.25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: 0.25s; } .menu__item:hover { background-color: #cfd8dc; } .navbar { display: flex; } .nav-brand { margin-left: 55px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-custom"> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> <h1 class="nav-brand" >Tools</h1> </nav> </body> </html>
解决方案2
0 已采纳 2022-07-17 14:37:37
use flexbox .使用flexbox 。 See the example below just a basic example.请参阅下面的示例，这只是一个基本示例。
* { margin: 0; padding: 0; box-sizing: border-box; } nav { width: 100%; height: 100px; display: flex; padding: 0 2rem; column-gap: 1rem; align-items: center; background-color: brown; } .hamburger { border: 0; width: 32px; height: 32px; display: grid; background: none; place-items: center; } .hamburger svg { fill: white; } ul { display: none; column-gap: 1rem; list-style: none; } a { color: white; text-decoration: none; font-family: sans-serif; } h1 { color: white; font-family: sans-serif; }
<nav> <button class="hamburger"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path> </svg> </button> <ul> <li><a href="#">Home</a></li> <li><a href="#">test</a></li> </ul> <h1> Tools </h1> </nav>
解决方案3
0 2022-07-17 15:05:17
It isnt the best practice, but an easy fix in this case could be to add the following to the stylesheet for the menu button:这不是最佳实践，但在这种情况下，一个简单的解决方法是将以下内容添加到菜单按钮的样式表中：
margin-left: 95%;
this is better than using a pixel specific margin as it will be relative to the screen (keep this in mind for the other parts of the style sheet when considering cross compatibility as px amounts stay the same across all devices, whereas if you use % instead, it's relative to screen size)这比使用像素特定边距要好，因为它将相对于屏幕（在考虑交叉兼容性时，请记住样式表的其他部分，因为 px 数量在所有设备上保持相同，而如果您使用 % 代替，它与屏幕大小有关）
Adding the left margin has the following result:添加左边距有以下结果：
like I said it's obviously not the best way to do this, making some use of parent containers or a grid layout or something similar would be more acceptable, but this line in the stylesheet should suffice for a quick easy fix就像我说的那样，这显然不是最好的方法，使用父容器或网格布局或类似的东西会更容易接受，但样式表中的这一行应该足以快速轻松修复
could be worth looking at the following on w3 schools if you aren't familiar with css layouts: https://www.w3schools.com/css/css_website_layout.asp如果您不熟悉 css 布局，可能值得在 w3 学校查看以下内容： https ://www.w3schools.com/css/css_website_layout.asp
Could also be worth looking at the following on responsive web design if you aren't already familiar with it: https://www.w3schools.com/css/css_rwd_intro.asp如果您还不熟悉响应式网页设计，也可能值得一看以下内容： https ://www.w3schools.com/css/css_rwd_intro.asp
EDIT:编辑：
I now realise I didnt really answer the question you were asking, however I think your best way forward is to look at wrapping everything in parent div's and using those to style your elements accordingly.我现在意识到我并没有真正回答您提出的问题，但是我认为您最好的方法是将所有内容包装在父 div 中并使用它们来相应地设置您的元素的样式。
I also think you should try making use of tags rather than the , and use an tag within the tag to add your icons.我还认为您应该尝试使用标签而不是 , 并在标签中使用标签来添加您的图标。 There is a tutorial on this which you can find below @ W3 Schools https://www.w3schools.com/howto/howto_css_navbar_icon.asp有一个关于这个的教程，你可以在下面找到@ W3 Schools https://www.w3schools.com/howto/howto_css_navbar_icon.asp
解决方案4
0 2022-07-17 15:28:49
If you change the Icon to position relative, it is relative to other objects.如果将图标更改为相对位置，则它是相对于其他对象的。 Afaik you can't do this with position: fixed. Afaik 你不能用 position: fixed 做到这一点。
You also need to change the display property to inline-block on both (or else they are block mode and take the complete row)您还需要将两者的显示属性更改为 inline-block （否则它们是块模式并占据完整的行）
Because your menu-box is position fixed, it will be on top of the button, you will need another button to close or make the box smaller (height - the top bar)因为您的菜单框是位置固定的，它将位于按钮的顶部，您将需要另一个按钮来关闭或使框变小（高度 - 顶部栏）
h1, .hamburger-menu{ display: inline-block; } .hamburger-menu{ width: 32px; position: relative; } * { margin: 0; padding: 0; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked+.menu__btn>span { transform: rotate(45deg); } #menu__toggle:checked+.menu__btn>span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked+.menu__btn>span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked~.menu__box { left: 0 !important; } .menu__btn { /*position: fixed; this needs to leave*/ top: 20px; left: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn>span, .menu__btn>span::before, .menu__btn>span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: .25s; } .menu__btn>span::before { content: ''; top: -8px; } .menu__btn>span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); transition-duration: .25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #CFD8DC; }
<nav class="navbar navbar-expand-lg navbar-custom"> <h1>Tools</h1> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.