.mid {
display: block;
width: 60%;
margin: auto auto;
}
.navbar {
display: inline-block;
position: absolute;
}
.navbar li {
display: inline-block;
font-size: 140%;
}
<div class="mid">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Feedback</li>
<li>Support</li>
</ul>
</div>
I want to go to the Services pages with the navbar locked on top. If the bar is fixed on top then called page should cover the rest of the screen.
you can try:
.navbar {
top: 0;
position: fixed;
width:100%;
}
this should hold the nav bar at the top of the page.
Related
I want to build a hamburger menu and I don't know why when I add position absolute to my UL(links-list) his background doesn`t show.It only shows the links and the border-bottom. I will post maybe someone will spot the issue.
Thank you in advance.
I will write here something because I need to have more words to post the question.
.header {
width: 100%;
display: block;
height: 0;
z-index: 1;
.header-content {
display: block;
.logo {
display: none;
}
.links-list {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin: 0;
width: 100%;
background: #505050;
height: 0;
.close {
display: block;
& a {
padding: 0 .5rem;
}
}
& li {
border-bottom: 1px solid #404040;
}
}
}
}
.open {
height: auto !important;
}
#burger-menu {
display: block;
height: 40px;
width: 100%;
background: url(/Core/img/burger.png)no-repeat 98% center;
background-size: 70px;
background-color: red;
}
<header class="header ">
<div class="container">
<div class="header-content">
<a href="#" id="burger-menu">
</a>
<img src="/Core/img/logo1.jpg" class="logo" alt="logo" />
<ul class="links-list">
<li class="close"><i class="fas fa-times"></i></li>
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="overlay"></div>
</div>
</div>
</header>
It's because you have height: 0 on .links-list. When positioning elements absolutely, in most, if not all, cases you need to make sure the height has a positive value so the background has an area to draw on.
I have a navigation menu where I am adding a divider image, after every li
using :after and :before.
But I am not able to have it responsive as per the mobile device.
Please have a look at the fiddle
The image is not starting for left initially and is non responsive as per the device width.
HTML
<ul class="menu-nav-toggle">
<li>About us</li>
<li>Faqs</li>
<li>Contact Us</li>
<li>My Account</li>
<li>My cart</li>
<li>Step</li>
<li>Offers</li>
<ul>
CSS
.menu-nav-toggle li:first-child:before {
content: '';
position: absolute;
width: 100%;
height: 5px;
display: inline-block;
background-position: center;
background-image: url(http://i.imgur.com/4jJVvVX.png);
background-repeat:no-repeat;
top: 0;
}
.menu-nav-toggle li:after {
content: '';
position: absolute;
width: 100%;
height: 5px;
display: inline-block;
background-position: center;
background-image: url(http://i.imgur.com/4jJVvVX.png);
background-repeat:no-repeat;
bottom: 0;
left: 0;
}
Please help.
do you expect like this.
Demo: http://jsfiddle.net/rekxgcq9/3/
.menu-nav-toggle li:first-child:before { background-position:left;}
.menu-nav-toggle li:after{background-position:left;}
Ive created a panel using HTML and CSS only. I want this panel to be on the bottom div of the screen and when you tap the image (that I used to replace the default text) the panel rises from the bottom. I've got that down for the most part, however, as I am rather new to panels I can't figure out how to use the same image to close the panel as well.
I'm not against using javascript or jQuery, but im just learning those two, so my skills are not quite as good as all of yours!
Here is my HTML and my CSS
<nav id="nav" role="navigation">
<ul>
<li>
<a class="findMe" href="#" aria-haspopup="true"><img
src="assets/whiteGearIcon.png" /></a>
<ul>
<li ><a href="#"><img class="theDudeAbides"
src="assets/tools/timerIcon.png" /></a></li>
<li><a href="#"><img class="obviouslyYoureNotAGolfer"
src="assets/tools/flashIcon.png" /></a></li>
</ul>
</li>
</ul>
</nav>
nav
{
/* container */
}
#nav > a
{
display: none;
}
#nav li
{
position: relative;
}
/* first level */
#nav > ul
{
height: 3.75em;
}
#nav > ul > li
{
width: 25%;
height: 100%;
float: left;
}
/* second level */
#nav li ul
{
display: none;
padding: 0;
float: right !important;
position: relative;
background-color: grey;
width: 65%;
height: 35%;
}
#nav li:hover ul
{
display: block;
}
.findMe img{
position: absolute;
left: 300%;
top: 50%;
width: 45%;
}
Thank you for your time.
I have designed a Navbar in which the drop down are absolutely positioned with respect to their parent list items (Main menu list is position: relative and submenus position: absolute).
My navbar 's main list is long (stretches till right-end of page). So when I hover on the last main menu item, then my drop-down occupies it's width and the page introduces a horizontal scroll (goes outside the body content).
I want the dropdown's on extreme ends of the page to open from right to left so that they lie within the body itself and no scroll is introduced.
How can I achieve this??? Please Help.
I have designed a Navigation Bar as follows:
HTML:
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS:
#menu li {
float: left;
border-right: 1px solid black;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu ul {
position: absolute;
top: 38px;
left: 0;
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
}
#menu ul ul {
top: 0;
left: 195px;
margin: 0 0 0 20px;
}
#menu ul a {
padding: 10px;
width: 175px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu li:last-child ul {
left: auto;
right: 0;
}
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.