I decided that my right floated dropdown-menu should be fixed. However, as soon as I position it to be fixed, it jumps to the left side. How can I fix this? I know I could use padding-left to move it. But I hope their is a more appropriate way to do this.
/*body*/
html, body {
font-size: 100%;
height: 100%
}
/*Header*/
.dropdown img {
height: 2.5em;
width: 3.5em;
}
.dropdown-menu {
background-color: rgba(0,0,0,0.5);
}
.header {
background:url(/img/sri.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6);
min-height: 100%
}
.header ul li a {
color: #fff;
}
.header .logo {
float: left;
margin-top: 0.42em;
}
.header .dropdown {
float: right;
margin-top: 0.42em;
position: fixed;
}
.dropdown ul {
top: 2em;
left:-8em;
width: auto;
}
.header .logo p {
font-size: 1em;
color: black;
font-family: 'Permanent Marker', cursive;
font-weight: bold;
}
<div class="header">
<div class="container">
<div class="logo"><p>blablabla</p></div>
<div class="dropdown">
<img src="img/menuwhite.jpg">
<ul class="dropdown-menu">
<li>Find me on Linkedin<li>
<li>Send me an email</li>
<li>Download my resume</li>
</ul>
</div>
</div>
</div>
Try right: 0;:
.header .dropdown {
float: right;
margin-top: 0.42em;
position: fixed;
right: 0;
}
That should do it. (float: right; would become irrelevant)
if you want to make the position of the menu fixed then no need to make it float right. Just put right value as per your requirement.
.header .dropdown {
/*float: right;*/
margin-top: 0.42em;
position: fixed;
right: 10px; //put the value you need
}
Related
I want to arrange my social media icons vertically at the top right corner of my website. I tried adding clear both, but it doesn't seem to work. Please have a look at my HtML and CSS code.
HTML code:
<div id="cover">
<div class="mediaicon">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
CSS code:
.mediaicon {
padding: 0;
margin-right: 0;
padding-top: 100px;
}
.mediaicon li {
clear: both!important;
}
.fa {
padding: 10px;
font-size: 15px;
width: 15px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
border-radius: 100%;
}
.fa:hover {
opacity: 0.5;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#cover {
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
.cover-content {
box-sizing: border-box;
margin: 0 auto;
position: relative;
text-align: center;
top: 100px;
width: 100%;
height: 800px;
}
h1 {
color: #FFF;
font-family: 'Lobster', cursive;
font-size: 600%;
line-height: 60px;
padding-top: 0;
text-align: center;
}
h2 {
color:#FFF;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
}
Here is a minimal way to achieve this: (Before edit)
Just add float: right and a pseudo element:.mediaicon::after with property clear: both
.mediaicon {
padding: 0;
padding-top: 100px;
margin-right: 0;
float: right;
}
.medication::after {
clear: both;
}
Edit:
Changed both the top nav and the media icons to flexbox with different justify-content (center and flex-end)
Working fiddle
This answer assumes you want the text centered on the viewport.
I would actually recommend making 2 columns for this, one for the text, and one for the icons.
HTML
<div class="container">
<div class="social-menu">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
Changed CSS
.social-menu {
position: absolute;
right: 10px;
top: 10px;
}
.social-menu ul li {
margin: 20px 0px;
}
.container {
margin: 0;
padding: 10px;
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
https://jsfiddle.net/fLnkvo2z/1/
Check your grid system. If you are using bootstrap then make grid system of your web page.
I suggest you to dnt go for margin. Use Bootstrap Instead.
I am trying to align a horizontal rule with the white line in my menu. And I want that alignment to stay when viewed on different screens. What's my best option for doing that? Image of what it needs to look like:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
float: right;
width: 51%;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display: block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right
}
#resume_btn:hover {
background-position: 0 -68px;
}
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
<div id="head"></div>
</div>
You can achieve this by modifying slightly the CSS and HTML code, and using translation to move the menu items to the center of the screen.
To do this you need to:
Wrap everything in div with the border-bottom (e.g.: #head)
Float the page title (h1) to the left (although maybe it would be better to change its position to absolute or it may affect the menu links)
Wrap all the navigation elements in a div (e.g.: #menu) with absolute position positioned in the center of the #head (left:50%)
Transform the #menu div to translate it 50% of its width to the left. This could be achieved by adding this to its style:
transform:translate(-50%, 0%)
You can see a demo working here: http://jsfiddle.net/o4ff4thc/ or below:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: inline-block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display:inline-block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#resume_btn:hover {
background-position: 0 -68px;
}
#menu {
position:absolute;
left:50%;
transform:translate(-50%,0%);
height:20px;
width:245px;
}
<div id="head">
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
</div>
</div>
I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?
Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/
HTML
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="" />
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 60px;
width: auto;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
width: 60px;
height: 60px;
margin-right: 5%;
float: right;
}
#clear {
clear: both;
}
If you want your navigation bar centered in the parent block, here is one way of doing it.
Apply display: inline-block to the .navbar and text-align: center to .headline.
Assuming that you want the navigation bar centered with respect to the full
width of the parent block, you need to take the image out of the content flow.
You can do this by applying position: absolute to the .facebook element.
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
text-align: center;
position: relative;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 60px;
width: auto;
display: inline-block;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
position: absolute;
top: 0;
right: 5%;
width: 60px;
height: 60px;
}
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="http://placehold.it/60x60" />
</div>
I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):
http://jsfiddle.net/nchm3gyj/32/
I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?
http://jsfiddle.net/nchm3gyj/42/
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I'm having some trouble with a fixed nav bar at the top of my page. It's supposed to be flush with the top of the page, but isn't. Here's my HTML:
<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>
<ul>
*enough li's to go past the bottom of the screen*
</ul>
and my CSS:
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
}
#logo {
padding-left: 1%;
padding-right: 1%;
color: #75cc83;
width: 180px;
height: 100%;
background-color: #333333;
font-size: 3em;
font-family: candara, sans-serif;
}
It seems like there are only problems with the fixed nav once I put content in there (the list items, in this case)
Add top:0 to you nav's rules:
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
top:0;
}
jsFiddle example