I am designing a new website, and I always spend a lot of time on the navigation bars when I do so. The following code has this intended effect:
HTML:
<div class="navbar">
Home
About
</div>
<hr></hr>
CSS:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
This works in Chrome, Opera, and even some versions of Internet Explorer, but the other browsers can't agree on anything:
Firefox (and some IE versions):
Safari:
here is a code snippet:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
<div class="navbar">
Home
About
</div>
<hr>
Is there any way to achieve the intended effect without browser sniffing?
The problem can be solved by doing following steps:
Add reset CSS (could be normalize or Meyer reset CSS)
Set a specific height to navbar and the element as Safari doesn't do well without the height
Applying box-sizing: border-box; for easy
styling without much of calculation between padding, border, margin
within one element.
Beside, I usually use the border of navbar instead of another hr tag for the line under the menu
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
I tried adding the Paypal smart button to my first project. When the Debit or Credit card button is pressed, the text above it goes through the navbar.
I tried adding additional blank space to the background image, but it did not work.
Is there a way to extend the blank space already made by the Paypal button script?
What can I do to fix it?
Navbar problem
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.4)),url(slike/slika\ 2.JPG);
background-position: center;
background-size: 100%;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 500px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 20px;
position: sticky;
}
.nav-links ul li a{
color: #7814ac;
text-decoration: none;
font-size: 30px;
font-family: 'Lora', serif;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: white;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
margin-top: 200px;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 36px;
color: white;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 12px 34px;
font-size: 24px;
background: transparent;
position: relative;
cursor: pointer;
margin-bottom: 5px;
}
.hero-btn:hover{
border: 1px solid #7814ac;
background: #7814ac;
transition: 1s;
}
The problem would appear to be the container in which all that text is located. Perhaps it has a fixed position or height. The black debit/credit card button needs to be rendered in a container that can expand normally. If for some reason you are not able to change the site's CSS to allow this, you can disable the black button with &disable-funding=card. Other buttons will open the PayPal window normally.
I am currently coding a responsive menu using the checkbox hack and noticed that when my menu appears after clicking the hamburger icon, it is wider than the viewport. The menu has a fixed position and a flex display. I have added red borders around elements to give show this issue. Here is the relevant code:
/* General styles */
html, body { height: 100%; }
body {
font-family: 'Miriam Libre', sans-serif;
}
a {
color: white;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ea3c53;
}
/* Navigation styles */
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.donate {
position: absolute;
margin: 21px;
}
nav .brand {
display: block;
height: 70px;
margin: 10px auto;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
nav label {
position: absolute;
top: 0;
right: 0;
padding: 21px;
background: #63E2C6;
cursor: pointer;
z-index: 2;
}
nav > label > span {
display: block;
margin: 4px auto;
height: 4px;
width: 25px;
border-radius: 1px;
background: #ffffff;
transition: 0.5s;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
top: -100vh;
left: 0;
height: 100vh;
width: 100%;
background: #222;
list-style-type: none;
border: 1px solid red;
transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
font-size: 30px;
border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
top: 0;
}
<nav>
<!-- Top bar -->
Donate
<img src="media/logo2.png" alt="Logo" class="brand">
<input type="checkbox" id="nav">
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu">
<li>Home.</li>
<li>Mission.</li>
<li>Contact.</li>
</ul>
</nav>
So, my question is, why is this happening? After all, I do have the width set to 100%, not 110%.
You have margin on your body element. Add:
body {
margin: 0;
}
There is also default margin and padding on your ul element that is also being set to width: 100%;
I recommend checking all of your primary containers, looking at them in your browser's inspector will highlight when you have additional spacing on an element that you may not be accounting for.
I have a small problem with centering some anchor elements I have written. I only can't center them on a mobile version of the site, they seem to be a little bit placed to the left side. To change the style of the site for mobile version I used #media queries.
That's the code:
HTML
<div id="page">
<ul id="icons">
<li><object type="image/svg+xml" data="images/pl.svg"></object></li>
<li><object type="image/svg+xml" data="images/gb.svg"></object></li>
</ul>
<img src="images/ryszard_final.png" alt="Ryszard KukliĆski Logo" />
<div id="buttons_div">
BIOGRAFIA
RECENZJA
<div style="clear: both;" class="btn"></div>
O PROJEKCIE
KOMIKS
</div>
</div>
CSS
/******************
GENERAL
******************/
body {
background-color: #1f1f2e;
color: white;
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Lato', sans-serif;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: white;
}
/******************
MENU PAGE
******************/
img {
display: block;
margin: 0 auto;
height: 20%;
width: 20%;
margin-bottom: 5%;
margin-top: 5px;
}
.btn1 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
height: 15%;
width: 40%;
border-radius: 10px;
line-height: 70px;
cursor: pointer;
border: 3px solid #a20000;
display: block;
position: relative;
overflow: hidden;
background: transparent;
transition: 0.3s;
margin-bottom: 15%;
}
.btn1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
opacity: .5;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
}
.btn1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
transition-delay: 0.2s;
}
.btn1:hover {
color: #fff;
}
.btn1:hover:before {
top: 0;
}
.btn1:hover:after {
top: 0;
}
.btn1_float {
float: left;
}
.btn2_float {
float: right;
}
#icons {
position: absolute;
right: 0;
list-style: none;
margin: 0;
padding: 0;
float: right;
margin-top: 10px;
margin-right: 5px;
}
#icons li {
display: inline-block;
}
object {
height: 16px;
width: 32px;
}
#media (max-width: 480px) {
#buttons_div {
width: 75%;
margin: 0 auto;
}
.btn {
float: left;
width: 75%;
}
}
#media (min-width: 1000px) {
#buttons_div {
max-width: 65%;
margin: 0 auto;
}
}
When I try to center it, it just doesn't work. Look at the photo below to see what I mean:
Page
As you see it doesn't work. It just pushes all buttons to the left. Can anyone help me, please?
You could try using the "position:absolute;" instead of text-align in the css page,then write the position of the buttons using bot:x px ,top:y px and so on,i think that the buttons show a litlle bit to the left because of the media queries that you used
You can:
Place them in ul, assign li before anchor, and text-align center
or
Place an anchor within a div, set divs width to 100% and text-align center
In your media query #media (max-width: 480px), change the width of .btn to 100%.
I currently have a sidebar as a navigation bar when I am viewing on desktop. In the desktop the view, the icons and text are side-by-side with the icons on the left, and the text on the right.
I was trying get it so that when it collapses down to mobile view, the sidebar to collapse to a nav bar that's fixed to the bottom of the screen. With the icons on top and centered underneath the text.
This is currently what I have: http://codepen.io/anon/pen/bpRgEJ
This is my code for trying to get to to position at the bottom:
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
margin: 0;
left: 0;
bottom: 0;
height: 5em;
width: 100%;
}
}
It currently collapses into a top nav bar, and the icons and text are side-by-side as opposed to being top-and-bottom.
Any help would be appreciated, thanks!
First of all, i suggest you to organize your CSS as the following:
1.- General selectors and clases with rules that will affect everything
2.- Media Queries that affect only the behavior for certain width.
So if you need a navbar that is always fixed, but for desktop is positioned on the left side of the screen and for mobile is on the bottom of the page you should write something like this:
.sidebar{ /* Every rule that will be always visible, something like colors, fonts, etc. */
background-color: yellow;
position: fixed;
}
#media(min-width:35.1em){ /* Larger than mobile devices */
.sidebar{
left: 0;
top: 0;
bottom: 0;
width: 40px;
}
}
#media(max-width:35em){ /* Breakpoint only for mobile */
.sidebar{
bottom: 0;
width: 100%;
}
}
In that way you will avoid dealing with rules that doesn't match together.
Your complete CSS should look like this:
.fa-2x {
font-size: 2rem;
}
.fa {
position: relative;
text-align: center;
vertical-align: middle;
font-size: 2rem;
}
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
z-index: 1000;
}
.main-nav>ul {
margin: 0rem 0rem;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-nav li:hover>a,
nav.main-nav li.active>a{
color: #fff;
background-color: #919191;
}
.main-nav .nav-text, .main-nav li>a{
font-family: 'Roboto', sans-serif;
}
.main-nav li>a {
border-collapse: collapse;
border-spacing: 0;
color: white;
font-size: 1.03rem;
text-decoration: none;
}
#media (min-width:35.1em) {
.fa{
display: table-cell;
width: 5rem;
height: 5rem;
}
.main-nav:hover,
nav.main-nav.expanded {
width: 15em;
overflow: visible;
}
.main-nav{
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 5rem;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
}
.main-nav li {
position: relative;
display: block;
width: 18rem;
}
.main-nav li>a {
position: relative;
display: table;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-nav .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 10rem;
}
}
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
margin: 0;
left: 0;
bottom: 0;
/*height: 5em;*/
width: 100%;
}
.main-nav ul{
display: table;
width: 100%;
}
.main-nav li{
float: left;
width: 25%;
list-style-type: none;
text-align: center;
}
.main-nav a{
display: block;
padding: 5px;
height: 74px;
}
.main-nav i, .main-nav span{
display: block;
}
.main-nav span{
font-size: 14px;
}
}
Your example forked in Codepen: http://codepen.io/xWaZzo/pen/BKZpQE
This should do the trick.
#myNavbar {
position: relative;
}
#myNavbar .nav {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
}
http://jsfiddle.net/DTcHh/1819/
You should remove top:0 from
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
/ *top: 0;*/
bottom: 0;
height: 100%;
left: 0;
width: 5rem;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
}
Also increase height in media query class
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: relative;
margin: 0;
left: 0;
bottom: 0;
height: 20em;
width: 100%;
}
}
Hope this is you want?