I'd like to change my sub-menu from horizontal to vertical, please let me know how this is possible...
My li is:
position: relative;
text-align: center;
display: table-cell;
and ul is:
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
Try changing:
display: table-cell;
to
display: block
This should do it. Make sure you clear your Joomla and browser cache once you do this.
Related
I am using HTML5 and CSS3 to make my website.
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image used as a banner. I have tried everything possible and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the Nav Bar HTML Code:
<p>Abelia </p>
<ul>
<li>Home</li>
<li><a href="#">Services<i class="
fas fs-caret-down"></i></a>
<ul>
<li>Electricity</li>
<li>Water</li>
<li>Housing</li>
</ul>
</li>
<li>About Us
<ul>
<li>Vison</li>
<li>Projects</li>
<li>Team</li>
</ul>
</li>
<li><a>Contact Us</a></li>
</ul>
<div class="banner-area">
<h2>Welcome To Abelia Group</h2>
</div>
This is nav bar CSS code
.menu_bar{
background-color: #c0392b;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
position: fixed;
}
.logo a{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: beige;
letter-spacing: 4px;
}
.menu_bar ul{
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.menu_bar ul li{
padding: 5px 15px;
position: relative;
}
.menu_bar ul li a{
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
letter-spacing: 2px;
font-size: 20px;
color: beige;
transition:all 0.2s ;
}
.menu_bar ul li a:hover{
color: black;
}
.fs-caret-down{
height: 2px;
width: 1px;
color: rgb(255, 255, 255);
}
.dropdown_menu{
display: none;
}
.menu_bar ul li:hover .dropdown_menu{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu ul li{
width: 150px;
padding: 10px;
}
.dropdown_menu2{
display: none;
}
.menu_bar ul li:hover .dropdown_menu2{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu2 ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu2 ul li{
width: 150px;
padding: 10px;
}
/*content*/
.banner-area{
background-image: url(image/mypic.jpg);
background-size: cover;
background-position: center;
top: 80px;
height: 680px;
width: 100%;
position: fixed;
}
.banner-area:after{
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 800px;
background: rgb(21, 21, 29);
opacity:.7 ;
z-index: -1;
}
I Need Help.
I want to create a hero-image, but I'm having trouble positioning the text.
I want it to look like this:
enter image description here
When I do it my way, then I have a problem with RWD positioning later.
Maybe it is possible to do it somehow simpler?
<header>
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>Zięba</h1>
<p>gallery</p>
</div>
<i class="fas fa-chevron-down"></i>
</header>
header {
.hero-img {
position: relative;
height: 100vh;
width: 100vw;
background-image: url('../img/Kapiaca-sie-small.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -2;
overflow: hidden;
.fa-chevron-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 95%;
color: $white-color;
font-size: 35px;
}
}
.hero-text {
position: absolute;
transform: translate(1430px, -50px);
height: 100%;
z-index: 5;
h1 {
color: $black-color;
font-size: 30rem;
font-family: 'Disclaimer', sans-serif;
}
h1::before {
content: 'Sławomir';
position: absolute;
display: inline-block;
transform: rotate(270deg);
top: 312px;
right: 180px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
color: $green-color;
}
p { position: absolute;
top: 540px;
right: 10px;
text-transform: uppercase;
color: $brown-color;
font-size: 1.6rem;
}
}
I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY
header .hero-text {
position: absolute;
right:40px;
height: 100%;
z-index: 5;
}
Just use Right Property to fix position.
What is the proper way to create a fluid row with Foundation 6 and scss? Currently I am doing it by setting $width: none, but I'm not sure if this is correct:
.topBanner {
#include grid-row($width: none);
background-color: $secondary-color;
padding: 5px;
text-align: center;
}
The produced CSS from this is:
.topBanner {
max-width: none;
margin-left: auto;
margin-right: auto;
margin: 0;
list-style-type: none;
background-color: #4990E2;
padding: 5px;
text-align: center;
}
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;
My CSS UL menu doesn't seem to want to centre, any ideas? I have pasted the code below for your review, I am quite new to CSS so your help is greatly appreciated :-)
The only way I have been able to centre it is by fixing the width and using the html centre tags but I need the menu to be at 100% for expansion and I need to to automatically centre.
The CSS
#menu{
width:100%;
margin: 0;
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
#menu li{
float: left;
padding: 0 0 5px 0;
position: relative;
list-style:none;
margin:auto;
}
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
#menu a{
float: left;
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
Thanks again :-)
Provide width to your menu and use margin: auto;
#menu{
width:300px; <--------Here
margin: 0 auto; <-----Here
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
Moreover why are you doing this?
#menu li:hover > ul{
display: block;
}
And also this
#menu a{
float: left;
....
}
Update: just read all the styles your cascade looks pretty messed up, use the following
#menu { /* I Assume this ID is applied to <ul> element */
width:/*Whatever you want to define*/;
margin: 0 auto; <---Change Here
padding: 5px 0 0 0;
list-style-type: none; <---Change Here
background-color:#333333;
text-align:center;
}
#menu li{
float: left; <---You don't need this
padding: 0 0 5px 0;
position: relative; <---You don't need this too
list-style:none; <---You don't need this too
margin:auto; <---You don't need this too
}
/* Take out this entirely from here */
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
/* till here */
#menu a{
float: left; <---You don't need this
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
And if you want your links inside the menu too be centered simply use this
HTML
<ul id="#menu">
<li></li>
</ul>
CSS
#menu li {
text-align: center;
}
Putting
text-align:center;
in the ul means that text in the ul is centered. You should add:
margin-left:auto;
margin-right:auto;
to the ul. This will work for all major browsers save IE. To work in IE you need to make sure that a tag containing ul has
text-align:center;
in it.