I'm trying to align the submenu in the image but even I have found the code in the template I'm still stuck with it.
image link
/* sub sub menu*/
.sf-menu ul ul {
position: absolute;
top: -999em;
padding: 32px 0 21px;
background: #c7c7c7 url('../images/bg_sub2.jpg') 0 0 repeat-x;
-webkit-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
}
Move just the arrow image with margin or top value based on what is selected.
Related
how might I add a shadow effect on a background image, using CSS ? I would like to have a shadow on the left, right and bottom of the background image ?
The command to add the shadow is the "box-shadow". But you can use this site to do this automatically for you:
https://www.cssmatic.com/box-shadow
There's a really handy tool that may help you here https://cssgenerator.org/box-shadow-css-generator.html.
This is an example of a shadow that appears in the areas you mentioned
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
I've made an example for you:
.shadow {
width: 90%;
margin: 20px;
height: 100px;
background: url(https://placekitten.com/640/360);
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-webkit-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
}
<div class="shadow"></div>
div {
width: 300px;
height: 300px;
box-shadow: 0 15px 30px #888 inset
}
<div>
</div>
Refer inset property of box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Values
In an attempt to create shadows around custom shapes, I discovered the drop-shadow filter CSS property. However after having implemented it, I realised that it slowed the website down significantly.
I am therefore searching for an alternative to gain the same effect without compromising the load speed of the page.
The main content of the site is surrounded by a shadow-box wrapper using a box shadow, but this could not be used for the end section due to the transparent part of the background.
I am trying to achieve a shadow which resembles the shadow of the shadow-box.
Here is a jsFiddle illustrating how it currently looks
and here it can bee seen on the real site
HTML
<div class="container shadow-box no-padding"></div>
<div class="container justify-content-center">
<section class="light-bg end-section" id="portfolio"></section>
</div>
CSS
.container{
width:70%;
margin:auto;
}
.shadow-box{
background:green;
height:200px;
-webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}
.end-section {
background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
z-index: 5;
height:200px;
filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}
.light-bg:before {
content: '';
position: absolute;
z-index: 3;
top: -50px;
left: 50%;
margin-left: -50px;
height: 50px;
width: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background: #c1c1c1;
}
https://www.dropbox.com/s/aqr0444isul1rky/Screenshot%202014-09-23%2022.06.49.png?dl=0
Above is an image of the about us dropdown in the header. When I click it, the below content is currently taking priority over the dropdown menu content.
This should not be the case but it is. Below is a picture of what it looks like when I click it:
https://www.dropbox.com/s/5ud446l7hpz7veg/Screenshot%202014-09-23%2022.08.15.png?dl=0
As you can see it's white and the content below is covering it from showing. There is a little white space but it's not taking up what it should.
I've searched around SO/Google and most answers say to add a higher z-index. I have tried this and it did NOT work.
This is the current CSS for the header (non-bootstrap but it works) and it shows the content properly:
#nav > li > ul {
position: absolute;
border: 5px solid #008553;
border-width: 5px 0px 6px;
padding: 27px 26px 30px 26px;
left: -9999em;
top: 35px;
width: 908px;
background: #f1f7f4;
z-index: 500;
-webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}
What can be the solution to this? There is other CSS from a wordpress website -- how can I tell the dropdown menu to be given priority to take up this space?
try this
.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu {
position: absolute;
border: 5px solid #008553;
border-width: 5px 0px 6px;
padding: 27px 26px 30px 26px;
left: -9999em;
top: 35px;
width: 908px;
background: #f1f7f4;
z-index: 500;
-webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}
I have a main content div with the property;
box-shadow: inset -15px 0 15px -15px;
I wish to make it so that the div has the same box shadow on each side, but I am not sure on how to do this. Here is the JSFiddle Demo.
HTML :
<div id="content"></div>
CSS :
#content {
width: 100px;
height: 100px;
background-color: #999999;
position: absolute;
left: 10px;
top: 10px;
box-shadow: inset -15px 0 15px -15px;
}
try this
box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
Just slightly modify your original CSS code to add left and right shadow:
#content {
width: 100px;
height: 100px;
background-color: #999999;
position: absolute;
left: 10px;
top: 10px;
box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
}
That's very simple to do, according to W3SCHOOLS the synstax for box-shadow is
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You can replace the none with inset or any other properties for the kind of shadow you want. the h-shadow is for the horizontal (left and right), the v-shadow is for the vertical (up and bottom) the blur is how sharp you want it to be and the spread is how far from each side you want it to be, also bare in mind these values are specified in px and finally color.
This is an example:
box-shadow: inset 0px 0px 5px 10px #888;
This has already been answered here
-webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
-moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45),
inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
Here is a jsfiddle
Try This
box-shadow: inset 0px 0px 5px 10px #8888;
Demo
I am developing this website.
The problem I am facing is white space on right side of header on zoom in. I did all sorts of things but failed to fill the white with area of header part with black.
Relevant CSS code: (I am not pasting the whole code as it is too lengthy, you can find it in the website)
header
{
float:left;
width:100%;
height:700px;
background:#000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
.header_main
{
background: #000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
float:left;
height:800px;
width:100%;
}
There are lot of issues , follow as suggested below:
1 .slideshow{margin: -10px 0 0 50px;} Remove this line from the class .slideshow
2 .headrouter{ padding-left:100px; width:1200px;} Remove padding-left and set width:1100px
3 #site_content {margin-left:50px; } remove margin-left
4 Add overflow-x:hidden to body like below:
body {
background: none repeat scroll 0 0 #FFFFFF;
font: 80% Arial,Helvetica,sans-serif;
overflow-x: hidden;
}
That should resolve the issue.
It is because on your http://www.brilliantseotechnologies.com/css/2nav.css you have width:98% for your ul.menu class