In the "lightblue" background (max-width:800px), my social media links fall behind my images. I've tried position:static and the z-index without any luck.
Next, in the "lightblue" background (max-width:800px), I believe my containers are crashing into each other. I've tried, clear:both; overflow:hidden, and display:flex;
Lastly, I'm trying to make my hamburger, nav bar position vertically, when it is responsive. On desktop, I still want the nav bar to be horizontal.
I am at a loss, please help and thank you so much for helping me on my very first website. :)
Please follow me on Instagram at #glp_princess
The link will take you to my html and css.
https://jsfiddle.net/p4zayr0u/
body {
background:lightblue;
}
#wrapper {
margin:0px auto 0px auto;
}
header {
position:static;
height:0px; /*keep?*/
width:100%;
top:0;
background:none;
border-radius: 0px;
}
.header-inner {
margin-bottom:10px;
padding-top:1px;
}```
The reason that your socials become unclickable is that you changed the styling of your header tag at the media query (max-width: 800px). Your social anchors are children of this header tag, and so any changes you make to the header will also effect these anchors. If you want to have position: fixed buttons, I would recommend that you place them as direct children of the body so that they don't get effected by changes you make to other elements.
Current:
<body>
<header>
<div class="header-inner">
<h2 tabindex="1">UX DESIGNER X RACHEL SADATIAN</h2>
<ul id="social2">
<li target="_blank" tabindex="2"><i class="fab fa-linkedin"></i>
</li>
<li target="_blank" tabindex="3"><i class="fab fa-instagram"></i>
</li>
</ul>
</div> <!-----end header-inner----->
...
</header>
</body>
Recommended:
<body>
<ul id="social2">
<li target="_blank" tabindex="2"><i class="fab fa-linkedin"></i>
</li>
<li target="_blank" tabindex="3"><i class="fab fa-instagram"></i>
</li>
</ul>
<header>
...
</header>
</body>
Related
I want to place "Shop by category" beside the ebay logo using margin-left and margin-top.
margin-left is not working or pushes some elements with it index.html
.navclass >ul >li{
list-style-type:none;
display:inline;
padding:5px 25px;
//float:left;
margin-top:1px;
margin-left:20px;
border:1px solid black;}
in the html i made the image and search in a separate div
and added this down
</div>
<nav class="navclass">
<ul>
<li>Shop by <br> Category
<ul class="sub-menu">
<li>Collectibles&art</li>
<li>Electronics</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
</ul>
<span class="arrow">▼</span>
</li>
</ul>
</nav>
Why not to use float:left; in css for logo and nav? You will get what you want and i think that will work better. Because margins can not work with different size screens i think.
Trying to create a navigation menu at the top of the page, but the images are spaced too far away from each other and then they wrap. How do I bring them closer together?
CSS:
.weddingMenuIcon{
width:30%;
}
HTML:
<ul class="list-inline">
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
</ul>
If I were building this as a centered navigation I would apply inline: block to the list items and then use a margin to define the spacing between them.
See this jsFiddle
.list-inline li {
display: inline-block;
margin: 0 40px; /* Items have 40px spacing between */
}
The fix was simply changing the width from using percentage to using fixed pixel width.
In a standard twitter bootstrap navbar dropdown, I would like to have three links, the usual text link and then two font awesome icons (also links) that are floated to the right.
Currently, if more than one link is placed within the li element it drops to a new line.
This is what I would like.
http://www.bootply.com/F35vbPUBAu
Just alter the markup a little, and add some CSS. See this updated demo. Basically, you need to remove some padding and cleared floats, and add floats to the anchors...
For this html (in the dropdown):
<ul class="dropdown-menu">
<li class="clearfix">
Course One
<i class="fa fa-file-text-o"></i>
<i class="fa fa-book"></i>
</li>
<li class="clearfix">
Course One
<i class="fa fa-file-text-o"></i>
<i class="fa fa-book"></i>
</li>
<li class="clearfix">
Course One
<i class="fa fa-file-text-o"></i>
<i class="fa fa-book"></i>
</li>
</ul>
This added CSS:
.fix-pad-left, .fix-pad-right, .fix-pad-mid {
clear: none !important;
}
.fix-pad-left {
padding-left: 3px !important;
}
.fix-pad-right {
padding-right: 3px !important;
}
.fix-pad-mid {
padding: 3px 3px !important;
}
Makes it look like this:
HTH :)
The way to do this is by surrounding all of the content in each li for the list you want to edit in a div tag, then style that tag. I was able to make a quick change in your code that partially worked.
<li> <div> Course One <span class="pull-right"><i class="fa fa-book"></i></span><span class="pull-right"><i class="fa fa-file-text-o"></i></span> </div> </li>
This pulls everything onto the same line, then you just have to tweak the css, padding and everything to get the desired result you want.
This works by making the li contain a div which is a unique container on it's own that can hold more elements. The li element otherwise makes some assumptions about the content within.
To override the style, just put the bootstrap style from their files into the following or something similar.
li div {
background-color: red;
}
This sets the background color/style for everything contained in the div and should work great. Picture proof below.
I realize this has probably been answered before, and if so, please direct me to another page.
I have a menu bar that goes horizontally across my page. I have several links and I want spacing so the links will fill the width of the nav.
CSS:
nav {
width:100%;
float:left;
text-align:center;
}
HTML:
<nav id="menu">
<a id="home" href="index.html">Home</a>
<a id="link" href="link.html">Link</a>
<a id="another" href="really.html">Another</a>
<a id="lalala" href="stupidcode.html">Lalala</a>
<a id="oneMore" href="example.html">One More</a>
</nav>
Using display: table-cell on the elements inside nav works.
Fiddle: http://jsfiddle.net/mnmxm2h0/
What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?
Here's the demo site: http://klaunfizia.pl/damian/
Style: http://klaunfizia.pl/damian/style.css
what I got now: http://i.imgur.com/6k2yNJbh.jpg
What I want to achieve: http://i.imgur.com/VICvrUDh.jpg
Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.
code:
<ul id="menu">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About me
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</nav>
<section id="container">
<section id="main">
<h1>hi! My name is Damian</h1>
<p class="mainText">
I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
</p>
</section>
</section>
css:
#navbar
{
height: 80px;
width: 100%;
position: fixed;
-webkit-transform: translateZ(0);
z-index: 10;
top:0;
}
Why can't you set the same background color and image as the body?
#navbar {
background: url(images/background.jpg) #ff7400;
}
Works just dandy in Chrome dev tools.
Assuming that your header/menu container has a solid background color, this looks like a simple z-index issue. Give your menu a higher z-index.
If you could provide more code or a jsfiddle, I could tell you exactly which line of css to add/remove/fix. Unfortunately your site isn't loading.