enter image description hereI'm trying to add a hamburger slide out in my navigation bar. I would like it to slide out to the right. We're using elementor in WP. Has anyone done this before? I cannot figure out a way to do this where it will stick.
This is the code I want to use:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function openNav() {
document.getElementById('mySidenav').style.width = '250px';
}
function closeNav() {
document.getElementById('mySidenav').style.width = '0';
}
</script>
<style>
body {
font-family: "Lato", sans-serif;
}
.elementor-menu-toggle {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #f1f4ee;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.elementor-menu-toggle a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.elementor-menu-toggle a:hover {
color: #000000;
}
.elementor-menu-toggle .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="elementor-menu-toggle">
×
xxxxxx
xxxxxx
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</body>
</html>
And this is what I'm getting back in the console as my class:
.elementor-84 .elementor-element.elementor-element-461994e > .elementor-widget-container {
margin: 0px 0px 0px 0px;
}
.elementor-widget-nav-menu .elementor-widget-container {
display: flex;
flex-direction: column;
}
.ob-has-background-overlay > .elementor-widget-container {
position: relative;
}
.elementor-element .elementor-widget-container {
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.elementor *, .elementor :after, .elementor :before {
box-sizing: border-box;
so I just need help figuring out which class I use, or if I'm missing something? I did try adjusting the css in the advanced widget for the nav bar, but after hitting update it does not stick.
if you are using Elementor Pro to create the header, you can use the responsive options in the advanced tab.
You could create a section only visible on desktop with the double menu and then a second section only visible in mobile with one single menu.
See more here. Responsive editing for mobile and tablets
Related
I have a sidebar in a project with Reactand I want that, when opening a menu item type Dropdown, the arrow changes position according to the state of the dropdown. (closed to the right, open to the bottom).
I implemented it with useState and it works without problems, depending on the statecurrent one dropdownI put one icon or another.
Question:
Can this behavior be simulated using only CSS? (I prefer to do it like this to learn on the one hand, and mainly because if I have a sidebar with 10 dropdowns or more, I will have many states and it is not the idea).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: "Lato", sans-serif;
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
</style>
</head>
<body>
<div class="sidenav">
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
</html>
I wanna change instead caret-down for caret-right onClick in the dropdown button. And if i click again, right instead down.
Fontawesome works by styling a pseudo element of an i element.
This means you can change a Fontawesome icon or you can just rotate the one that you have in CSS. For example, to have a right facing arrow instead of the down facing one next to the word Dropdown when the submenu is not dropped down and pointing down when it is, you could put this CSS in your style sheet:
.sidenav button.dropdown-btn i.fa-caret-down::before {
transform: rotate(-90deg);
display: inline-block;
}
.sidenav button.active i.fa-caret-down::before {
transform: rotate(0deg);
display: inline-block;
}
Here's the snippet
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
body {
font-family: "Lato", sans-serif;
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
.sidenav button.dropdown-btn i.fa-caret-down::before {
transform: rotate(-90deg);
display: inline-block;
}
.sidenav button.active i.fa-caret-down::before {
transform: rotate(0deg);
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav">
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
I am working on Colt Steele's Aurora grove project from his bootstrap bootcamp on Udemy. Instead of using the background image that he has for the project I want to use my own background video. I've inserted it just as he did but for some reason it is not appearing. I can share the github link of the project:
https://github.com/Kazim786/sarah-calligraphy
Here is a link of the finished colt steele project someone else deployed: https://aurora-grove.herokuapp.com/index.html
(the video needs to be inserted in place of the tipis picture)
Here is the code for where the background video is to be inserted:
(#showcase is where I inserted the video link)
Koala was also used in this project
body {
font-family: cursive;;
background: pink;
}
.navbar {
font-weight: 100;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
#showcase {
background: url("../media/video-1599785729.mp4") bottom center / cover no-repeat;
min-height: 750px;
h1{
font-family: cursive;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
#media(max-width: 760px){
.navbar{
background: #1f1f1f;
.nav-link:hover {
border-bottom: none;
}
}
#showcase {
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Please let me know if HTML is also needed and I will edit it onto here
Why not use the video tag instead? That will work for sure. Make sure the video is positioned absolute inside your #showcase container like so:
<section id="showcase" class="d-flex align-items-center justify-content-center">
<video style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
" controls=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
... (rest of the code)...
</section>
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.
I have been trying to center the slider that I have inside the header. The header and the whole container is neatly centered, with just margin: 0 auto; Then I tried to include a slideshow inside the header, and tried by many ways to place it correctly. Yes, I succeeded for my own configuration by using position:aboslute and then playing with coordinates, but that will not work for the rest of the world.
The site (under construction) is www.hrcprojectconsulting.com
Since you ll be able to see all the CSS stuff, do you know how in heaven that can be positioned? I tried all margin combinations but I am kind out of options that I could think of.
A good news is that Internet Explorer 10 is also available now for Windows 7 so, CSS3 stuff and html5 placeholders work so I ll never code for backwards things anymore.
Note: if you happen to see everything ok, this is because you have the same kind of monitor and resolution than I do.
thank you
The code for the slider:
<style type="text/css" media="screen">
#slider {
width: 960px; /* important to be same as image width */
height: 150px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 960px; /* important to be same as image width or wider */
position: absolute;
top: 125px;
left:265px;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
The code for my homepage:
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body{
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}
This is because the ul has a default padding. You will have to set the padding for your ul#sliderContent to 0:
#sliderContent {
padding:0;
margin:0;
}
Then you should remove the position: absolute from your stylesheet.
To place the sliderContent at the bottom you could do like this:
#topsection {
position: relative;
}
#slider {
position: absolute;
bottom: 0;
}
#sliderContent {
padding: 0;
margin: 0;
}
I'm coming to the end of a new web project for my father's website, however after opening it in IE, I now want to jump off a bridge!
I have attached two screenshots of how the site is rendering in IE in comparison to any other browser. For some strange reason, it is pushing the page content underneath the slider.
In IE it renders like this: http://cl.ly/JVgZ
In other browsers is renders as expected, like this: http://cl.ly/JVgo
(Sorry, newbie so I can't post images directly -.-)
As you can see, the whole of the dark grey text area is hidden beneath the slider.
I'm assuming this is CSS related, and my code for the slider is as follows:
body { }
.panel h2.title { }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { }
.coda-slider { padding-bottom: 0px; padding-top: 0px; background-color: #262626; }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { overflow: auto !important; }
/* Change the width of the entire slider (without dynamic arrows) */
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { }
/* Tab nav */
.coda-nav ul li a.current {
color: white;
height: 60px;
z-index: 9999;
position: relative;
}
.coda-nav ul li a.current:before {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: 2px;
left: 50%;
margin-left: -9px;
z-index: 9999;
border: 10px solid transparent;
border-top: 10px solid #303030;
border-bottom: none;
}
/* Panel padding */
.coda-slider .panel-wrapper { }
/* Preloader */
.coda-slider p.loading { text-align: center }
/* Tabbed nav */
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;}
.coda-nav ul li { display: inline }
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none }
.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { display: none; }
.coda-nav-left a, .coda-nav-right a { display: none; }
p { color: #bfbfbf; }
I hope someone is able to save me!
Thanks so much in advance for your time and any help you are able to offer.
Edit: This code is also present in my HTML document in the section...
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
#sliderarea {position: absolute !important; margin-top: 0px !important;}
div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;}
</style>
<![endif]-->
I think the problem is with your clearfix technique. A “clearfix” is what gives floated elements, such as your slider, an externally-visible height, instead of the normal zero height of floated elements. Your clearfix is working in most browsers but not in IE.
Try the alternate methods of clearfixes described in this answer about methods for clearfixes. Maybe those other methods would work better than your current one. I’m have trouble telling what your current method is because your clearfix rules are mixed with your visual-display rules. Start with the micro-clearfix at the top of that answer:
/* For modern browsers */
.coda-nav ul li a.current:before,
.coda-nav ul li a.current:after {
content:"";
display:table;
}
.coda-nav ul li a.current:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.coda-nav ul li a.current {
zoom:1;
}
Delete any rules in your existing code that the clearfix would override.