I need help making CSS for a modern vertical navbar

这一生的挚爱 提交于 2021-02-17 03:06:30

问题


I have been playing around with a (I think) pretty modern vertical nav bar, I've gotten it pretty much down, however its like not really responsive, like at all. And its better off if its rewritten. Any help is appreciated :), or if you have any video that you know of or found that'll gear me in the direction that'll work too!

I've tried making a two normal sections one section thats about 8vw wide and goes all the way down and then having a second section thats, well, for the rest of my content.

Hope you guys are being safe.

What I designed

As for code, I've made a webflow of pretty much of what I had, I don't have my main PC on me at the moment since I'm moving houses, hopefully this gives a bit of an in-site of what I had.

https://looskie.webflow.io


回答1:


You can start with something like this:

html,
body {
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  font-family: Oswald, sans-serif, Arial;
  font-size: 14px;
  background: #fff
}

a {
  text-decoration: none
}

li {
  list-style: none
}

ul {
  margin: 0
}

.main-nav {
  width: 100vh;
  height: 45px;
  position: fixed;
  background: #4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
}

ul.nav {
  margin: 0 auto;
  height: 100%;
}

ul.nav li {
  margin-right: 20px;
  float: right;
  height: 100%;
  line-height: 45px;
}

ul.nav li a {
  color: #fff;
}
<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>


来源:https://stackoverflow.com/questions/61451159/i-need-help-making-css-for-a-modern-vertical-navbar

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!