I have a slider component that I'm building. It uses the Bootstrap .container class to be contained in a specified page width, but needs to overflow to the right side of the screen. If I use overflow-x: visible it overflows to the right, but then the whole page scrolls. If I give the parent overflow: hidden then I am not able to scroll through the slider.
What would be the best way to allow both overflow-x: visible and allow scrolling with a scrollbar at the same time without the entire page being affected?
HTML
<div id="main-container">
<section class="container">
<ul class="panels">
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
</ul>
</section>
</div>
CSS
#main-container {
overflow: hidden;
}
.panels {
overflow-x: visible;
display: flex;
height: auto;
width: auto;
list-style: none;
margin: 0;
padding: 0;
}
Related
Having read this after struggling with an absolute-positioned sub-menu that will not appear above page content on desktop breakpoints, I stripped all offending CSS identified in the article, but to no avail. The sub-menu in the below HTML will not appear above page content, despite having absolute position with z-index applied. Anyone with further thoughts on the issue, please let me know -- I'm baffled.
<nav id="nav-main" role="navigation">
<ul class="site-nav site-nav__main">
<li class="nav__menuitem nav__menuitem--main first level1"><a class="nav__menulink nav__menulink--main transition" href="my-link">my-link</a></li>
<li id="subNav__parent" class="nav__menuitem nav__menuitem--parent transition clearfix level1">SubNav Toggle Label<span class="subNav__toggle">+</span>
<ul class="subNav">
<li class="nav__menuitem nav__menuitem--subnav first level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link2">my-link2</a>
</li>
<li class="nav__menuitem nav__menuitem--subnav last level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link3">my-link3</a>
</li>
</ul>
</li>
</ul>
</nav>
.site-nav {
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
list-style-type: none;
transition: .2s ease-out; /*related to a different transition; not relevant to the issue being
posted about*/
transform: translateY(0%);
}
// SUBNAV
.nav__menuitem--parent { /*this is the click element used to open / close the sub-menu
position: relative;
cursor: pointer;
}
.subNav {
position: absolute;
z-index: 10;
margin: 1rem auto 0 auto;
padding: 1rem 0;
width: 250px;
visibility: 0;
}
.subNav.open {
transition-property: visibility, max-height;
transition-duration: .5s;
transition-timing-function: ease-out;
max-height: 500px; /* approximate max height */
visibility: 0;
}
The solution I implemented doesn't address the fact that the HTML and CSS as written should work but doesn't, but FWIW, I z-indexed the header element and positioned it above the wrapping element for page content. Since the submenu is a child of the global nav, which in turn is a child of the header element, it's stack order is equivalent to the header's per the z-index default value of auto.
When specifying position: absolute; the item will be positioned relative to its parent. You need to specifiy top:0 or similar to override this.
Here is a quick fiddle to illustrate
.parent-nav {
background-color:red;
position:absolute;
top:0;
width:100%;
}
.sub-nav-parent {
background-color:blue;
position:relative;
}
/* 10px below sub nav parent */
.sub-nav-child {
background-color:cyan;
position:absolute;
top:10;
left:0;
z-index:99;
width:100%;
}
<div class="page-content">
<h1>
This is my page content
</h1>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
</div>
<div class="parent-nav">
<ul class="sub-nav-parent">
<li>Sub Nav Parent</li>
<li>
<ul class="sub-nav-child">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
</div>
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
I'm having a hard time trying to center a dropdown which is toggled by a button in a group. The group is centered correctly but the dropdown continues at the left corner.
Here is an example.
Can someone help?
Thanks in advance!
If you want to center your div.dropdown inside another div do it like so:
#dropdown1 {
width: 183px;
margin: 0 auto;
}
The drawback of it is that you need to know the exact width of the element you are centering (thats the reason I use an id as a selector; of course you need to assing it first).
See how it works on your updated fiddle.
Maybe you are looking for something like that : Live demo (jsfiddle)
.centered {
text-align: center;
}
.centered .dropdown {
display: inline-block;
min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
}
<div class="centered">
<div class="dropdown">
<a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
Edit completed the CSS
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.