enter image description here
How can I make the text go under when i press the hamburger(menu) icon.
Welcome to the StackOverflow.
Here is an example that may help you:
a {
color: #fff;
text-decoration: none;
}
/* Hamburger */
.hamburger1 {
height: 45px;
margin: 10px;
display: -ms-grid;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
z-index: 120;
}
.hamburger1 div {
background-color: rgb(61, 61, 61);
position: relative;
width: 40px;
height: 5px;
margin-top: 7px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#toggle1 {
display: none;
}
#toggle1:checked+.hamburger1 .top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 22.5px;
}
#toggle1:checked+.hamburger1 .meat {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -5px;
}
#toggle1:checked+.hamburger1 .bottom {
-webkit-transform: scale(0);
transform: scale(0);
}
#toggle1:checked~.menu1 {
height: 340px;
}
/* Menu */
.menu1 {
width: 100%;
background-color: #02173F;
margin: 0;
display: -ms-grid;
display: grid;
grid-template-rows: 1fr repeat(4, 0.5fr);
grid-row-gap: 25px;
padding: 0;
list-style: none;
clear: both;
width: auto;
text-align: center;
height: 0px;
overflow: hidden;
transition: height .4s ease;
z-index: 120;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu1 a:first-child {
margin-top: 40px;
}
.menu1 a:last-child {
margin-bottom: 40px;
}
.navlink {
width: 100%;
margin: 0;
padding: 10px 0;
font: 700 20px 'Oswald', sans-serif;
}
.navlink:hover {
background-color: #fff;
color: rgb(61, 61, 61);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
<section class="p-menu1">
<nav id="navbar" class="navigation" role="navigation">
<input id="toggle1" type="checkbox" />
<label class="hamburger1" for="toggle1">
<div class="top"></div>
<div class="meat"></div>
<div class="bottom"></div>
</label>
<nav class="menu1">
<a class="navlink" href="#">Home</a>
<a class="navlink" href="#">About</a>
<a class="navlink" href="#">Blog</a>
<a class="navlink" href="#">Contact</a>
</nav>
</nav>
</section>
I also suggest you to take a look at W3Schools.
I'm having problem with styling scroll bar on element with border-radius i've tried to use partent element with overflow: hidden but still it keeps going over. Is there a way to hide it?
<div class="match-container">
<ul class="match-list">
<li class="match-list__item">Hamlet</li>
<li class="match-list__item">Ham</li>
<li class="match-list__item">Hamster</li>
<li class="match-list__item">Hamburger</li>
<li class="match-list__item">Hammock</li>
</ul>
</div>
.match-container {
width: 100%;
margin: 0 auto;
background-color: #131313;
border-radius: 0 0 23px 23px;
transform: scaleY(0);
transform-origin: top center;
transition: 0.1s ease;
}
.match-container--active {
transform: scaleY(1);
transition: 0.3s ease;
}
.match-container--active-scroll {
transform: scaleY(1);
transition: 0.3s ease;
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
}
::-webkit-scrollbar {
padding-right: 3px;
width: 10px;
background-color: #ffffff41;
}
::-webkit-scrollbar-thumb {
width: 10px;
background: #6d6d6d;
}
::-webkit-scrollbar-thumb:hover {
background: #999999;
}
It's looks like this.
Hi I'm using Owl Carousel version 2 and can't find an example to put the navigation on the sides of the carousel like right and left chevrons or arrows. How do you do it?
I just did this yesterday:)
Firstly make sure nav is turned on in the config
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$('#_samewidth_images').owlCarousel({
margin:10,
autoWidth:false,
nav:true,
items:4,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>']
})
This will inject the controls into the DOM, see
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
Next use CSS to position the Next and Prev controls, this is what I used:
.owl-prev {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
margin-left: -20px;
display: block !important;
border:0px solid black;
}
.owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
right: -25px;
display: block !important;
border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}
For my icons I used Font Awesome but you could use anything similar. Note the navText in the javascript code, this is where you put your custom HTML. I guess you could use an image too (or put it in the background of the .owl-next and .owl-prev divs. Note I used transform to make my arrows higher.
Just a little bit improvment from #KevinSol answer above.
https://stackoverflow.com/a/40449552/10933080
This is my JS code:
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
});
and my CSS code:
.owl-prev, .owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block !important;
border:0px solid black;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }
.owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}
Customize Owl Carousel 2 Navigation Arrows
Source Link
Working Demo Link
Update the navText property
$('.owl-carousel').owlCarousel({
margin: 10,
nav: true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
Add CSS Style
.carousel-wrap {
width: 1000px;
margin: auto;
position: relative;
}
.owl-carousel .owl-nav{
overflow: hidden;
height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #2caae1;
}
.owl-carousel .item {
text-align: center;
}
.owl-carousel .nav-btn{
height: 47px;
position: absolute;
width: 26px;
cursor: pointer;
top: 100px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}
.owl-carousel .prev-slide{
background: url(nav-icon.png) no-repeat scroll 0 0;
left: -33px;
}
.owl-carousel .next-slide{
background: url(nav-icon.png) no-repeat scroll -24px 0px;
right: -33px;
}
.owl-carousel .prev-slide:hover{
background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}
span.img-text {
text-decoration: none;
outline: none;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
cursor: pointer;
width: 100%;
font-size: 23px;
display: block;
text-transform: capitalize;
}
span.img-text:hover {
color: #2caae1;
}
HTML markup
<div id="slider" class="owl-carousel">
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
</div>
Css style
slider is class name
#slider .owl-nav div.owl-prev,
#slider .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#slider .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-next:hover,
#slider:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}
slider activation
$('#slider').owlCarousel({
loop:true,
items: 1,
margin:10,
autoplay: true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
})
I recommend using this simple style:
.owl-nav button {
position: absolute;
top: 0;
bottom: 0;
}
.owl-prev {
right: -25px;
}
.owl-next {
left: -25px;
}
.owl-nav button i {
font-size: 25px;
text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
And the following config:
nav: true,
navText: ["<i class='fa fa-chevron-right'></i>","<i class='fa fa-chevron-left'></i>"],
all-slider is class name
#all-slide .owl-nav div.owl-prev,
#all-slide .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#all-slide .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-next:hover,
#all-slide:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}`enter code here`
If you just want to do it with some CSS and one arrow in one adge, the other in the other edge without having a margin, but it covering the slider you can use this CSS:
.owl-nav button span {
font-size: 60px;
padding: 0px 20px;
}
button.owl-prev {
float: left;
}
button.owl-next {
float: right;
}
.owl-nav {
width: 100vw;
position: absolute;
}
.owl-carousel.owl-theme.owl-loaded.owl-drag {
display: flex;
justify-content: center;
align-items: center;
}
here is my code
for this you need to install bootstrap
code in .HTML file
i used ngx-owl-carousel-o for this
and installed using npm
Owl-carousel-o link
<div class="position-relative">
<owl-carousel-o class="" [options]="customOptions" #owlCar>
<ng-container *ngFor="let slide of slides ">
<ng-template carouselSlide id="slide.id">
<div class="slider">
<img class="hvr-grow-shadow p-2 rounded-4" (click)="getid(slide?.id)" [src]="slide?.image"
[height]="200" alt="slide.alt" title="slide.title">
</div>
</ng-template>
</ng-container>
</owl-carousel-o>
<div class="container-fluid">
<div class=" position-absolute top-50 start-0 translate-middle-y" style="z-index: 1;">
<a class="btn" (click)="owlCar.prev()"><i class="fa fa-angle-left"
style="font-size: xxx-large; color: white;" aria-hidden="true"></i></a>
</div>
<div class=" position-absolute top-50 end-0 translate-middle-y" style="z-index: 1;">
<a class="btn" (click)="owlCar.prev()"><i class="fa fa-angle-right"
style="font-size: xxx-large; color: white;" aria-hidden="true"></i></a>
</div>
</div>
and my code in .ts file is
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 100,
autoplay: false,
center: true,
autoplayHoverPause: false,
// navText: [ '<i class="fa fa-angle-left" aria-hidden="true"></i>',
// '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
// nav: true
}
Hope its Help image in browser
I am attempting to create this mobile menu.
https://anythinggraphic.net/responsive-mobile-navigation-menu/
I have added all of the code and when I get the page into a mobile viewport, the page does nothing but show the two sets of periods "...". Unlike in the snippet, the page actually shows the list, just when it gets to the listed viewport, it shows the periods. I have the meta viewport code implemented and the Jquery vocab.
What am I doing wrong?
$(document).ready(function(){
$(function() {
// Insert Responsive Navigation Icon, Close Icon, and Overlay
// If you have access to your HTML, you should put this directly into your markup.
$('<div class="responsive-nav-icon" />').appendTo('.row.one');
$('<div class="responsive-nav-close" />').appendTo('nav');
$('<div id="overlay" />').insertAfter('footer');
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
return false;
});
});
});
.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
background: #fff;
line-height: normal;
padding: 5px 8px 4px;
top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
opacity: .7;
}
.responsive-nav-close {
top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 100%;
z-index: 90;
}
#media only screen and (max-width: 960px) {
.responsive-nav-icon,
.responsive-nav-close {
display: block;
position: absolute;
z-index: 1;
}
nav {
height: 100%;
padding: 20px;
position: fixed;
top: 0; left: -400px;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 0;
}
nav.slide-in {
left: 0;
overflow-y: scroll;
width: 280px;
z-index: 100;
}
nav .menu-item {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div class="wrap">
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Login
</li>
</ul>
</nav>
</div>
</header>
<main class="content" itemprop="mainContentOfPage" role="main">
...
</main>
<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
...
</footer>
Looks like you are not linking the responsive jquery file ... css-jquery-responsive-mobile-navigation-menu.js
My Problem is that i cant get the twitter bootstrap to work in my website
whereas it works perfectly fine in the fiddle: http://jsfiddle.net/Mns8q/32/
Can anyone tell me what is the problem.?
Thanks in advance.
This code is present in the view that is called when you reach the url in my website, which is same as the fiddle :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>
<style>
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.menu {
height:100%;
/* background-color: #3D6AA2; */
&.collapse {
float:left;
height: 100% !important;
width: auto;
}
&.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
&.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
&.collapse.in.width {
width: auto;
}
&.collapse.in.height {
height: auto;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
}
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
html = textHash[key];
$('#contentm').html(html);
}
$("#menu a").click(function(e) {
$('#menu').collapse('hide');
changeContent(e.target.innerText);
});
textHash = {
"Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil. And by \"devil\", I mean Robot Devil. And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
"Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
"Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>
</head>
<body>
<div class="frame">
<div id="menu" class="menu nav-collapse collapse width">
<div class="collapse-inner">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
Menu
</div>
</div>
<ul class="nav nav-tabs nav-stacked">
<li><a>Futurama</a></li>
<li><a>Star Wars</a></li>
<li><a>Doctor Who</a></li>
</ul>
</div>
</div>
<div class="view">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="contentm">
Integer eu quam et lacus luctus molestie.
</div>
</div>
</div>
</body>
</html>
It appears that you are not using SCSS on your site, while you are on the jsfiddle.
You could re-write your CSS as follows:
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
}
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
.menu {
height:100%;
}
.collapse {
float:left;
height: 100% !important;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}