This is the navbar we are working with.
How can you control how far up or down you want it to be/initialize?
So instead of having it start where it currently is positioned, how can I make it appear e.g. where one of the arrows is pointing?
Related
I am coding with React and I am trying to make a horizontal scrollable menu at the top of my application. When I have scrolled and selected a tab, I want this to be animated such that it floats nicely to the middle of the visible menu. The current selected menu tab can be outside of the view (e.g. if I have scrolled horizontally far away from it).
So when I click Tab no. 4:
I want this to happen (that Tab no. 4 are smooth sliding to the center of the menu:
You can use some great plugins like this in order to achieve desired functionality
I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed
Hi I was wondering if there was a way to toggle the bootstrap responsive nav upwards instead of down. I don't have a fixed bottom nav but still wanted it to go up instead of down and didn't know if this was in their framework or if there was a way with javascript or jquery to do so.
Not sure if this question been answered already.
I'm looking to create a navigation that collapses when the user scrolls. I would like something similar to this site http://adcglobal.org/. The navigation becomes smaller as you scroll. I would like to have mine collapse into a menu (similar to a responsive navigation menu except, this is on scroll and not #media to change screen size).
I'm playing around with jQuery and this is what I have so far. The problem with this is that everything disappears as soon as you start scrolling.
$(window).scroll(function(){
$("ul").hide();
});
I haven't used Javascript/jQuery much to have a good understanding on the library and what can or can't be done.
You'll want to use something like:
$("ul").removeClass('top');
$("ul").addClass('scroll');
where in your css class top you will have all the styles set for when it's at the top, and in class scroll you will have all the styles for after you scroll.
You will also likely want check each time the user scrolls the
value of $("ul").offSet().top, if it is 0, you want to add the class top back to the element, and remove scroll. You can also check that value to make sure a certain amount has scroll prior to changes the classes, eg:
if ($("ul").offSet().top > 20){ ... }
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.