How to add a drop down menu - css

Using just CSS can somebody please show me how to add a drop down menu on the Big Cartel Neat theme.
Need help on adding subheading to the main heading for example...
About The Brand (hover mouse and subheadings appear)
Brands Philosophy
About the Founder
About Us
header .sections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0 32px;
position: relative;
width: 50%;
z-index: 97;
}
header .sections .navigation {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
header .sections .navigation li {
display: block;
margin: 0 16px;
}
header .sections .navigation li a {
padding: 4px 0;
text-align: center;

I'm new to CSS also, but I'll try my best to help. This is what you can do.
#heading:hover .subheadings{
display: block
}
Basically, your #heading id (You'll probably only have 1, so you should use id.) is the "About The Brand" text. When you add hover, you can make something happen when the mouse hovers over the main heading. In this case, you can add the class .subheadings right after it and display it as a block element (The 3 subheadings will be stacked on top of each other). This will cause the subheadings to appear after you hover over the main heading. Basically, it's like an if then statement in Python.
I hope this explanation helps! Good luck :)

Related

Left alignment of last line of flex cells

I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}

BS Header with right aligned

I would like to add to my header on the right an additional small element that is aligned to to right as follwed:
<h1>Header<small>subheader<span class="pull-right">subheader right</span></small></h1>
However the span element on the right is placed higher/ not in line with the first small element. What am I doing wrong?
I do not want to use the css grid.
This is what you can do.
h1{
display: flex;
width: 100%;
align-items: center;
}
small{
display: flex;
width: 100%;
}
span{
display: flex;
width: 100%;
justify-content: flex-end;
}
You can remove pull right class from span.

How to fix specific CSS position scaling in percentage

How to fix specific CSS position scaling in percentages?
The jump occurs during manual scaling in the browser.
code:
jsfiddle: http://jsfiddle.net/y5b576cm/2/
Try avoiding using percentage in width and height as much as you can, they are very messy.
First of all, have your top containers with the same fixed width:
section.h-banner {
width: 66.444%;
position: relative;
margin: 0 auto;
left: -3.666%;
}
then align the child container
.container-header {
text-align: center;
margin: 0px -12%;
left: 12.7%;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
}
but again, very messy..

How to remove line between widgets and center other widget?

I have one issue that cant resolve. I want to remove line that is between other two widgets in my site, and centralize the other 2 contact widgets. How to make this? The CSS from that widget that i want to remove is :
.footer-branding {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 30%;
float: left;
text-align: center;
padding: 30px 30px 15px 15px;
}
Image where is shown what line I want to remove.
Just adding some css for that:
.footer-branding {
width:0;
padding:0;
}
.footer-contact {
broder-left:0;
margin:0 auto;
}

Full page background image is not responsive

I´m trying to adapt the background image i have on my website but i cannot get it smaller on Iphones, Nexus or whatever small phone i'm testing it. I am using the Chrome developer tools to test this.
Here's a snippet on JsBin: http://jsbin.com/dacamemule/edit?output
The background image is 1920x1080 which would make it too big for small phones but i did tried to create a break point using media queries with the image size set at 768x432 but it still didn´t work. It's supposed to be an image map where the links in it will "stick" in the same place no matter if it's desktop or responsive view. The blue dot with the video is one example. There should be more dots spread throughout the map.
Thanks for your help.
If you want your image to be responsive, you might want to remove the min-width:1024px rule from img.bg. Perhaps replace it with min-width: 100%; max-width: 100%; height: auto;?
However, if you really want to use your image as background, don't use an <img> tag at all. Use the background properties of your <body> or of some helper (container) and make use of the background-size property (and the required prefixes).
Proof of concept:
body {
background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height:100vh;
margin: 0;
padding:0;
overflow-x: hidden;
font-family: sans-serif;
}
.someLinks {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.someLinks>a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 45%;
-ms-flex: 1 0 45%;
flex: 1 0 45%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
color: red;
text-decoration: none;
}
.someLinks>a:hover {
background-color: rgba(255,0,0,.35);
color: white;
}
<div class="someLinks">
link
link
link
link
</div>
This is just an example. Replace the links with your actual links and remove their onlick property when you want them active.
As of now, your desired outcome is unclear and this might not fit your purpose. Please create a Minimal, Complete, and Verifiable example of your problem, properly linking all your resources. Right now, the contents of video.js, index.html and style.css are unknown to us. And so are the images you are overlaying.
change position "fixed" to "relative" on your image css.

Resources