After adding position:fixed and overflow:scroll property menu is scrolled but submenu does not show on right side bar or when I remove property overflow then right side bar menu shows but parent menu does not scroll.
<nav id="cssmenu" style="display:none">
<ul class="level0_category">
<li class="parentMenus"> Men's Corner </li>
<li class="parentMenus"> Women's Corner </li>
<li class="parentMenus"> House of Electronics
<ul class="level1_category">
<li>Laptop</li>
<li>Mobile</li>
<li>Printers</li>
<li>AC</li>
<li>Refrigerator</li>
</ul>
</li>
</ul>
</nav>
nav#cssmenu{margin:0 auto;position: fixed; height: 100%; width: 350px;left: -600px}
enter image description here
enter image description here
Related
I have a hamburger menu scrolled all the way to the bottom of the screen. The problem I'm facing is that even when I scroll my finger up and down on the hamburger menu, the entire page scrolls along with it.
I've tried numerous solutions online but can't seem to get it working.
Below is my current HTML and numerous attempts with CSS (too many to list).
What's a good way to tackle this problem?
Here's my HTML:
<div class="mobile-nav container">
<div class="collapse navbar-collapse" id="user-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>
Item 4
</li>
<li>
Item 5
</li>
<li>
Item 6
</li>
<li>
Item 7
</li>
<li>
Item 8
</li>
</ul>
</div>
Attempts with CSS:
mobile-nav.container {
border-top: 2px solid #f47e1f;
overflow: hidden;
position: absolute;
}
#user-navbar-collapse-1 {
position: fixed;
overflow: hidden;
}
Most of the time the overflow: hidden; CSS property on the body, html should do the trick. Setting also the height: 100% and margin: 0 is advised, but usually not necessary.
I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?
(PS: Image is not a background!)
<nav class="navbar " role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
</ul>
</div>
</div>
</nav>
<img src=" ">
This should work:
.navbar {
position: absolute;
top: 0;
left: 0;
}
See: https://jsfiddle.net/tcybj6sj/
You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.
I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to vertical align the nav items with 50px height and a custom border on the menu links, but keep it functional when in mobile size and de border in mobile view is replaced with a normal underline declaration.
This what i had before adding a custom bottom border and it works:
--> Fiddle before
And this is what happens when adding a custom bottom border when in mobile size the menu items don't vertical align and the background doesn't go down with them:
--> Fiddle after
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
i want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
I am trying to affix an image to the bottom of a nav list and have it stay there when the page scrolls.
This is what I am wanting:
This is what I am getting when the affix kicks in:
I need it to stay just like picture one. I have tried googling the problem and searching stack overflow with no results.
Here is the code:
<!--SIDEBAR NAVIGATION -->
<ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="850">
<li class="nav-header">The Green Panda</li>
<li class="divider"></li>
<li>What We Do</li>
<li class="divider"></li>
<li>Our Solutions</li>
<li class="divider"></li>
<li>More Than Web Design</li>
<li class="divider"></li>
<li>Contacting Us</li>
</ul>
<img src="img/woody-effect.png" class="img-bottom nav-list" data-spy="affix" data-offset-top="850">
EDIT:
The selector was incorrect.
If the height of your menu is static, you can add a class to that image when it switches over to the fixed styling and apply this css:
top: 310px;
That will position it at the bottom of your menu.
I would set up a class underneath .affix and have it applied to your image (add the id panda_logo)
#panda_logo.affix {
top: 310px
}