It's complicated to put it in words, but here I go.
Alright so at the moment I'm working on a project that requires me too do one thing. That thing being when the nav bar gets too a certain point I want the color to change. So let's say I have a nav bar white, and underneath that it's gray. How do I go about that?
I don't think you can do it with HTML/CSS but this work
Javascript/jQuery
$( window ).scroll(function() {
if ($( window ).scrollTop() > 500) {
$('.nav').addClass('updated-color')
} else {
$('.nav').removeClass('updated-color')
}
})
CSS
.nav {
background-color: white;
}
.nav.updated-color {
background-color: gray;
}
Related
I am using bootstrap to code the frontend of a website. What I hope to achieve is that when I scroll the navbar vanishes and the sidebar pops up. I have been stuck on this for ages so If anyone has any idea to let me know.
This should answer the first piece of the question, in terms of hiding the navbar on scroll. I would get away from using bootstrap in this instance. It is easier to build your navbar from scratch, style it with css, and then use javaScript to manipulate it dynamically, such as hiding it. Once this is working. I can help you to get the sidebar to present on scroll. The link should give you an idea where to do with this.
https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
It is my opinion that the following block of javaScript will help you the most. you did not leave a code block, so it is only an assumption, based on what the common layout is. Again, I would move away from bootstrapping the menu bar, since you are wanting to customize features within it. You will see an explanation of the site that I listed below:
The first block would be your navbar div:
<div id="navbar">
Home
News
Contact
</div>
You can set this up and represent it however you would choose too. It should be in a standalone HTML file, lets say index.html for these purposes.
The next block of code is the CSS, as it would pertain to the above codeblock. Again, this can be shaped however you would like it to be, but for these purposes it is simply giving a blueprint. This should also be in a standalone css file.
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
The final code block is your script. The JS that will dynamically change the navbar is contained within. As you can see below, they are setting the variable globally, though not always the best way, and then creating a function expression, this has to do with hoisting, and then simply hide the navigation bar. Please let me know if you need any further assistance to help you understand this.
js.file
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
I have a top menu using Bootstrap and have made it transparent, but want it to change to opaque once a user scrolls to the next section/div on the page. Anyone know the best/easiest way to accomplish this?
You can add a class on scroll down, or remove your class what is rewriting Bootstrap styles.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.navbar').addClass('solid');
} else {
$('.navbar').removeClass('solid');
}
});
});
This will assign a class to your top menu initially setting it to a transparent version, then once you scroll down past the threshold, it will remove that class which will remove the transparency.
$(window).scroll(function() {
var scrollPercent = ($(window).scrollTop() / $(document).outerHeight()) * 100;
if (scrollPercent > 20)
$('#container').removeClass('transparent')
else
$('#container').addClass('transparent')
});
#container {
height: 1000px;
background-color: orange;
}
.transparent {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="transparent">
</div>
I am having trouble making elements hover on a mobile device.
In my CSS, I type something like:
.button:hover {
background-color: #fff;
}
This seems to hover fine on my desktop, however on my iPhone and other touch devices, I can't seem to make the button hover.
There is no hover event on mobile, you can define hover behavior and it will work on desktop. But on mobile, you will see this hover only by click/touch.
Hovers mean one thing on the other. in this case its the mouse cursor over the HTML button or whatever element you use.
In the case of a phone, there is no mouse cursor. its always a click. Hovers in most cases would show only on click or touch. If you really need this you can try the Javascrit onclick() or other functions, so when they click or touch, you can add a bit of something.
For a very quick solution of this problem with jQuery/CSS, I did the following.
wrote styles for my element like this:
.one-block:hover, .one-block.hover { ... }
positioned it:
.one-block { position: relative; }
added the last element in this block -> .mobile-mask:
<div class="one-block">
....
<div class="mobile-mask"></div>
</div>
positioned .mobile-mask:
.mobile-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
hide it for non-mobile (this part is not precise at all: just with css. if you detect mobile devices by some other means and, for example, give a class to body, than it will be more precise. in this case I just need a quick solution):
#media (min-width: 681px) {
.mobile-mask {
display: none;
}
}
create javascript that will add/remove .hover class:
$('.mobile-mask').on('click', function(){
$('.list .mobile-mask').show();
$('.list .one-block').removeClass('hover');
$(this).hide();
$(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
var windowWidth = $(this).width();
if(windowWidth > 680){
$('.list .one-block').removeClass('hover');
}
});
I was wondering if it is possible to change the position of the search box but only on mobiles.. I tried to put id="search" on the box that contains the input with:
#media only screen and (max-width: 767px) {
#search
{
position:absolute;
top: 0;
width:90%;
background: none repeat scroll 0 0 #ffffff;
}
}
But doesn't seem to work. I want the search box just at the bottom of the header, but only on mobiles. Is this possible?
At work we use JavaScript & jQuery to move an element on different screen sizes like so:
function moveMenu(){
if($(window).width() < 767){
// If the screen is less than 767, move the menu to mobile position
$('#menu-header').prependTo('#mobile-menu-wrapper');
}
else {
// Otherwise, put it in the normal location
$('#menu-header').prependTo('#header-menu-wrapper');
}
}
Its important that if someone loads the page on a small screen, then resizes it to large that this function runs. So we also add these two bits to trigger it on page load and on page resize:
$(window).resize(function(){
moveMenu();
});
$(window).load(function(){
moveMenu();
});
This method means you don't have to duplicate menus to 'reflow' the page.
Add another search box in the Center-block
Hide this on desktop and show it on the
UPDATE: Position fixed will work but will not allow to use other elements
the code is something like this
#search1 {
display: block;
}
#search2 {
display: none;
}
#media only [....] {
#search1 {
display: none;
}
#search2 {
display: block;
}
}
yesterday i just developed magento website but i have problem with how to fix banner overlaps because this DIV just overlaps the menu...i try to seperate and use ie7 stylesheet but nothing happen.. :(
http://thaiamuletstore.com/main1/index.php/
try to hover menu --> STORE-> Amulet Types->Great Jatukham
ie7.css
#charset "utf-8";
/* CSS Document */
#example-one .nav { overflow: hidden; margin: 0 0 0 0; background:url(../images/tab-border.gif) repeat-x 80px; height:87px; }
.block-subscribe { padding-left: 15px!important; padding-right:15px; margin-top:20px;}
.nav-container { float:left; }
.mw_footer { clear:both!important; }
.account-login .col2-set .registered-users { width:435px; }
.account-login .col2-set .new-users { width:430px; }
.account-create .buttons-set { width:550px; }
.block-subscribe { padding-left:5px!important ; height:127px; padding-bottom:0px!important }
.block-content .newsbut { height:21px!important; }
ul li ul li ul li a.level1 { zoom:1; } <-- i try control with this
There are a couple of options.
The easiest, if possible, is to place your menu at the bottom of the page and then move it up via absolute positioning. This is because IE sucks at z-index and the easiest way to trick it is to have the html code generate as the last item (placing it on top of all other html).
This will however not work with Flash, silverlight or java-applets which will still sneak on top.
Alternatively you can (however i like the first option more) place an IFRAME under your menu filling out the area you want it to cover. This "fixes" most of IE's whacky ideas about positional elements. But like i said, if you can move your menu to the bottom of the html page, then that is your best bet.