Move mobile nav from left to right - html

I am trying to move mobile navigation from top left corner and slide in from left side to the right side. I've tried to change position settings from left to right, but it didn't work.
I will really appreciate any help!
Code below, thank you!
#wrapper {
position: absolute;
width: auto;
min-width: 60px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
label {
cursor: pointer;
}
&:focus {
outline: none;
}
.menu {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 240px;
height: 100%;
transform: translate3d(-240px, 0, 0);
transition: transform 0.35s;
}
label.menu-toggle {
position: absolute;
right: -60px;
width: 60px;
height: 60px;
line-height: 0px;
display: block;
padding: 0;
text-indent: -9999px;
background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat;
}
label.active {
background: transparent url(menu-cross.png) 50% 50% / 25px 25px no-repeat;
}
ul li>label {
background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat;
}
a,
label {
display: block;
text-align: left;
padding: 0 30px;
line-height: 60px;
text-decoration: none;
margin: 0 auto;
color: #000;
}
&:hover {
color: #666;
}
.menu-checkbox{
display: none;
}
.menu .menu label.menu-toggle {
background: none;
}
.menu-checkbox:checked + .menu {
transform: translate3d(0, 0, 0);
}
<div id="wrapper">
<input type="checkbox" id="menub" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menub"><span>Toggle</span></label>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</div>
<!-- #wrapper -->

I believe you have overcomplicated your task. You could simply open new project on visual studio and go from there. This would be the best option, since the result you want to achieve is most likely the same.
Now if you do want to stick to this, you must go carefully through your style code and what could be preventing the item to align on the right side.

Related

Nav bar options been pushed to one side

just to preface I would say I'm rather new at coding, in particular, this is related to web coding.
I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine.
However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.
I've tried to edit the position (left) of each menu item but it doesn't seem to be working.
Visualisation of the problem
here is the HTML coding for it:
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav>
And here is the CSS
nav {
position: relative;
width: 100%;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}
nav a{
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
/* display: inline-block; */
text-align: center;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: whitesmoke;
border-radius:8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width:120px
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 120px;
left: 00;
}
nav a:nth-child(2){
width: 120px;
}
nav a:nth-child(2):hover~.animation{
width: 150px;
left:102px;
}
nav a:nth-child(3){
width: 120px;
}
nav a:nth-child(3):hover~.animation{
width: 140px;
left: 230px;
}
nav a:nth-child(4){
width: 120px;
}
nav a:nth-child(4):hover~.animation{
width: 140px;
left: 350px;
}
nav a:nth-child(5){
float:right;
margin-right: 40px;
}
nav a:nth-child(5):hover~.animation{
width: 150px;
left: 1290px;
}
a:hover{
color: #c18392;
}
(Also I am aware the navbar doesn't navigate to anything yet)
Please help!
And thank you in advance
nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.
nav a:same as you have added.
nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense.
hover:adding different bgcolor on hover. but you can do anything you want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
width: 100vw;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
nav a {
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
}
nav a:nth-child(5) {
margin-left: auto;
}
a:hover {
background-color: whitesmoke;
}
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav

How to avoid jumping html elements over each others

I'm new to CSS and web development and trying to build my own and first website. I've read a few articles related to displaying and positioning elements however I still unable to get elements positioned perfectly while resizing the browser window!.
What I am trying to accomplish is in the codepen link in the first comment below
https://codepen.io/letsimoo/pen/XWNGoGa
HTML CODE
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="mainBody">
<header class="mainHeader">
<div class="headerStuff">
<div class="social-list">
<div class="fb">
FB
</div>
<div class="twitter">
Twitter
</div>
<div class="instagram">
Instagram
</div>
</div>
<ul class="navigation">
<li> <b>My Projects</b> </li>
<li> <b>Gallery</b> </li>
<li> <b> About </b> </li>
<li> <b>Contact</b> </li>
</ul>
<div class="logoDiv">
<h2>Logo</h2>
</div>
</div>
<div class="HeaderLine"></div> <!-- Header Separator Line -->
</header>
</body>
CSS CODE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
margin: 0px 0px 0px 20px;
/*width: 100%;*/
}
.mainHeader {
height: 80px;
}
.headerStuff {
height: auto;
display: flex;
position: relative;
align-items: bottom;
vertical-align: baseline;
width: 100%;
}
.social-list {
display: inline-flex;
position: absolute;
margin-top: 20px;
left: -10px;
}
.social-list div {
margin-left: 12px;
}
.navigation {
position: absolute;
right: 175px;
text-align: right;
height: 30px;
padding: 0px;
margin: 0px;
margin-top: 30px;
display: flex;
}
.navigation li {
background-color: #22385b;
display: inline-block;
margin-left: 5px;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: "Chakra Petch", sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv {
position: absolute;
right: 0px;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin-top: 68px;
margin-right: 175px;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
Please have a look to my code in the above link and try to resize the browser window to the minimum size
What the problem I'm facing?
Definitely you've notices how is the navigation elements jumped over the social media dev after resizing the browser window
So how can avoid this ugly act from the headerStuff div!??
Also please help me to improve my question if there are something wrong in my description or in the mentioned tags
Your .navigation .sosial-list are positioned absolute. That means they are out of the order of the other elements and does not take space by the other content.
As absolute positioned element .navigation is allways relative to the next parent element which is not positioned static. In your project it is .header-stuff. At the same time the margin-top moves it down from the top edge of header-stuff ...
So, if the screen becomes narrow your .header-stuff becomes narrow also. And your navigation keeps still in place: 175px from right edge of .header stuff and 30pxmargin from top ... that make it layered above your socials.
If you want to keep your structure enlarge the margin-top for .navigation so the navigation has still place enough to move below the social information.
But if you are open to change your sturcture you don't need an absolute positioning. Use a structure with block elements so socials and navigations are still beneath and don't layer over each other.
Just easy DEMO code structure example to explain the idea:
// css structure DEMO
nav {
display: block;
}
ul {
/* align ul to right */
margin-right: 0;
margin-left: auto;
}
li {
/* align li's into a line */
display: inline-block;
}
header hr {
... style your subheader line ...
}
// html structure DEMO
<header>
<div class="top-header>
... your socials ...
</div>
<nav>
<ul>
<li></li>
...
</ul>
</nav>
<hr>
</header>
Here's your updated updated CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
/* margin: 0px 0px 0px 20px; */
}
.headerStuff {
height: 80px;
display: flex;
position: relative;
vertical-align: baseline;
width: 100%;
justify-content: space-between;
align-items: center;
}
.social-list {
display: inline-flex;
}
.social-list div {
margin-left: 12px;
}
.navigation {
margin: 0;
}
.navigation li {
background-color: #22385b;
display: inline-block;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: 'Chakra Petch', sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv h2 {
margin: 0;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin: 0 auto;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
You can adjust css properties for specific screen sizes via media queries.
#media only screen and (max-width: 796px) {
//
}
PS. align-items:bottom is not really a thing. Probably you meant align-items:baseline

Inverse curve on side of button

so i have the following design for some "button tabs".
One side is curved, so border radius would not really be possible.
But is this type of curve even possible ?
or am i doomed to use some sort of image?
mostly looking for tips on how this might be accomplished, or somewhere i can look for a solution, since my previous tries to find a solution has yet to yield a result.
Html
<div class="tab-row">
<button>All Products<div class="tab-row__counter">20</div></button>
<button>Hardware<div class="tab-row__counter">20</div></button>
<button>Virtual<div class="tab-row__counter">20</div></button>
<button>Bundles<div class="tab-row__counter">20</div></button>
</div>
Css
.tab-row{
button{
background-color:$element-bg;
border:0;
color:$white;
width:300px;
height:90px;
margin-right:20px;
margin-top:40px;
border-radius: 5px 100px 0 0;
&:first-child{
margin-left:40px;
}
.tab-row__counter{
}
}
}
This is what i ended up with as a result,
https://codepen.io/andrelange91/pen/YzPqJXO
not exactly curved but close enough
You can try the curves by using the border-radius, transform, and transform-origin properties like,
/**
* Slanted tabs with CSS 3D transforms
* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
*/
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1.5em 2em 1em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -7px;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: .5em; left: 0;
z-index: -1;
border-radius: 10px 10px 0 0;
background: #434f78;
box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom left;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
You can use radial gradient also,
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1em 5em 1.2em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -20px;
border: 0px none;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0;
right: 0;
bottom: .5em;
left: 0;
z-index: -1;
background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
transform: perspective(10px) rotateX(1deg);
transform-origin: bottom left;
border: 0px none;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
Whilst this does not replicate the exact shape you're after, this does provide an example of the method I described in the comments in how to approach it. You will just need to edit the values in ::before and ::after to get it to your desired shape.
.curve {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
.curve:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
.curve:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.tab {
height: 150px;
width: 300px;
background: red
}
<div class="container">
<div class="tab"></div>
<div class="curve"></div>
</div>
Also take a look at Creating s-shaped curve using css

How can a child override the opacity of the parent?

Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.
As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.
How can I solve this problem? I want the image with the border to have a full opacity.
body {
background-color: #f2f2f2;
color: #404040;
}
div.navbar {
height: 600px;
background: rgba(255, 255, 255, 0.7);
background-image: linear-gradient(25deg, #ec008c, #fc6767);
margin-top: -10px;
margin-left: -5px;
position: relative;
width: 105%;
}
img.logo {
position: absolute;
margin-top: 4%;
margin-left: 25%;
height: 40%;
padding: 25px;
border: 25px solid #f2f2f2;
border-radius: 50%;
}
div.image {
position: relative;
height: 100%;
opacity: 0.2;
background-image: url("img/slide1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div.nav {
position: absolute;
bottom: 0;
margin-left: 600px;
margin-bottom: 50px;
}
a.nav-item {
color: #f2f2f2;
font-weight: bold;
font-size: 25pt;
margin-right: 50px;
text-decoration: underline;
}
a.nav-item:hover,
a.nav-item .active {
text-decoration: overline underline;
}
<div class="navbar">
<img class="logo" src="img/logo.png">
<div class="image">
</div>
<div class="nav">
<a class="nav-item">Home</a>
<a class="nav-item">Twee</a>
</div>
</div>
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body {
margin: 0;
}
div.navbar {
height: 100vh;
/*
IMPORTANT BITS:
- ADDED image and gradient to navbar background and
- REMOVED opacity
THE REST:
The rest was just to make the demo look better/simpler
*/
background:
linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
url(http://placeimg.com/1000/600/arch) no-repeat center;
background-size: cover;
position: relative;
}
.logo-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
height: 0;
padding-top: 25%;
border:25px solid #f2f2f2;
border-radius: 50%;
overflow: hidden;
}
.logo {
width: 90%;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="navbar">
<div class="logo-wrapper">
<img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
</div>
</div>
</body>
</html>
Child can't override opacity of parent due to how opacity is managed by the browsers.
Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.
.frame{
background-color: #AAAAAA;
opacity: 0.2;
border-radius: 13px;
padding: 21px;
color: #000000;
height: 73px;
}
.frametxt{
margin-top: -73px;
color: #000000 !important;
opacity: 1.0;
}

How do I make CSS arrow the same width as the container?

I currently have arrows below the containers as shown in this fiddle: https://jsfiddle.net/xo9vwks1/
HTML:
<ul class="arrows">
<li><div>sadf sdfsdsdf</div></li>
<li><div>sdsa sdss sdsd s </div></li>
<li><div>sdfsdf sad assdssds s sdsdds sn</div></li>
<li><div>sdsd sadfsdf asdf sadfon</div></li>
<li><div>sdf sdfsdf sss ssdss ss s asd sa gsdsdf</div></li>
</ul>
CSS:
ul.arrows li {
background-color: #ddd !important;
display: block;
margin-bottom: 40px !important;
padding: 0 10px !important;
text-align: center;
list-style: none;
max-width: 400px;
}
ul.arrows li div::after {
border-color: #ddd transparent transparent;
border-style: solid;
border-width: 30px;
content: " ";
height: 0;
position: absolute;
right: 0;
left: 50%;
top: 100%;
width: 0;
z-index: 10;
margin-left: -30px;
}
ul.arrows li:last-child div::after {
border-width: 0;
}
ul.arrows li div {
display: inline-block;
line-height: normal;
padding: 15px 0;
position: relative;
}
I would like to have the arrows extend all the way from left to right so that they are equal to the width of the container like shown in the image below. The arrows must also be responsive. I couldn't work it out. How do I do this?
CSS linear-gradient is one way to do it, if you're only looking to support newer-ish browsers:
ul.arrows li {
background-color: #ddd !important;
display: block;
margin-bottom: 40px !important;
text-align: center;
list-style: none;
max-width: 400px;
}
ul.arrows li div {
line-height: normal;
padding: 15px 10px;
position: relative;
}
ul.arrows li div::before {
position: absolute;
left: 0;
top: 100%;
width: 50%;
height: 30px;
background: linear-gradient(to left bottom, #ddd 50%, rgba(0, 0, 0, 0) 50%);
content: " ";
}
ul.arrows li div::after {
position: absolute;
left: 50%;
top: 100%;
width: 50%;
height: 30px;
background: linear-gradient(to right bottom, #ddd 50%, rgba(0, 0, 0, 0) 50%);
content: " ";
}
ul.arrows li:last-child div::after,
ul.arrows li:last-child div::before {
display: none
}
<ul class="arrows">
<li>
<div>sadf sdfsdsdf</div>
</li>
<li>
<div>sdsa sdss sdsd s </div>
</li>
<li>
<div>sdfsdf sad assdssds s sdsdds sn</div>
</li>
<li>
<div>sdsd sadfsdf asdf sadfon</div>
</li>
<li>
<div>sdf sdfsdf sss ssdss ss s asd sa gsdsdf</div>
</li>
</ul>
Shorter code and you can see the smoothness of the triangle :)
* {
margin: 0;
padding: 0; }
ul.arrows li {
background-color: #ddd !important;
display: block;
margin-bottom: 50px !important;
padding: 15px 0;
text-align: center;
list-style: none;
max-width:400px;
position: relative; }
ul.arrows li:before {
position: absolute;
top: 48px;
left: 0;
content: "";
border-right: 200px solid transparent;
border-left: 200px solid transparent;
border-top: 30px solid #ddd; }
<ul class="arrows">
<li>
<div>sadf sdfsdsdf</div>
</li>
<li>
<div>sdsa sdss sdsd s </div>
</li>
</ul>
Just tweak your code into this. Actually you got the idea of using the pseudo element border. However, you didn't specify a value for border-right and border-left width.
Hope it helps :)