I'm in the making of a navbar that uses html, css and javascript. I recently came up on a problem when I was making the navbar responsive and I need help. Here is a link to codepen: https://codepen.io/Linus_Ekman/pen/WMeJvv where I pasted all my code so that you can see better what I mean and try to help me. So everything works well except that when I click on the "hamburger" icon a dropdown should appear under the navbar that stretches over the whole width of the page with the 4 navigation options in a column. Here is an example of what I want it to do when the "hamburger" icon is clicked: https://codepen.io/Linus_Ekman/full/wywjoB/
Tell me if you need any more information
Edit:
The dropdown now works the way it should as you can see in the first codepen link. But there is another problem. If you hover your mouse under the "hamburger" icon when the dropdown is up you can see that the links are there wich means that the navbar is there but just not shown. How can I get them to go away?
I was looking your example and, if you add some rules to your show class (ul.show), you can make it work:
You need to set background-color: #fff and left: 0 and you'll be good to go.
I forked your pen and you can check the code here https://codepen.io/fermijs/pen/aqoGyG
Related
this is the website I am trying to set up: http://koralhassan.com
I have adjusted the template to make the CV section a hover-dropdown section. However, when I scroll down, the dropdown menu no longer appears when hovering. I am trying to find a way to either make the it appear, or make the dropdown expand to the right of the CV section instead of below it (which I think would also solve the problem). I have very little programming knowledge so please don't throw me in the deep end. Thank you!
Your class .w3-bar has property overflow: hidden.
Remove it and it should be fine.
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us.
As I looked at your source code, I guess you should somehow add the .cbp-af-header-shrink class back to the header, when you click the green button.
http://darrenbachan.com/playground/diamond-hand-car-wash/index.html
A few things I'm trying to accomplish here:
When you click anywhere except the menu item it closes the nav
When you click on a menu item it closes the nav and animates to an ID
The off-canvas nav appears only in it's mobile view. If you view the site on your desktop the nav does animate you to a specific ID, so I have some js there that I'm guessing could be used for the off-canvas one. I've read a few articles saying to use data-toggle but I couldn't get that to work.
So I figured I would chime in on this and offer a couple of solutions. If you are just trying to close the menu that you have in place currently when someone clicks on a link in your menu you could very simply either just use a click function to click menu button that you have there like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').click();
});
Or you could probably just remove the checked from the checkbox like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').prop('checked', false);
});
You may want to add an if statement so it only happens at mobile screen sizes so something like the following:
$('.navbar-collapse li a').on('click', function(){
if($(window).width() <= 767){
$('input.checkbox-toggle').prop('checked', false);
}
});
Or vice versa with the click function toggling the click above as well.
And then you could use your scrolling script that you already have in place and everything should work as you want it to.
Or
I see that on your site you are already using bootstrap. Bootstrap has a plugin built in that is called scrollspy that handles one page designs allowing you to scroll to sections and things of that nature. Using this instead of the script that you have in place may be a little more minimal and will serve you better because it will handle replacing active classes in your navbar as well. It may be much better for what you are trying to achieve with your site.
Also At the bottom I have placed a link to a jsfiddle demo that uses scrollspy along with an off canvas menu that is essentially the same thing that you are using in your site above except you can just use one menu for both large and mobile screens instead of placing two menus on your site. Look over this fiddle demo it has scrollspy in place and like I said instead of using two menus it just restyles the off canvas menu at mobile screens and uses jquery to toggle a class to the body of .menu-open when the menu button is pressed.
I wasn't quite sure if you wanted the same kind of overlay style of menu so I made it similar to the site that you have linked to above but if you want it to be a different type of off canvas style then you can just change the css to toggle it from the left or right or wherever.
Here is a link to the fiddle JSFiddle Demo
Anyway Hope this all helps and if you have any questions feel free to comment below.
P.S I noticed when looking at your page source that you have .container-fluid wrapping .containers throughout your page. This is not really necessary at all and is more than likely causing the horizontal scrollbar at the bottom. I'm not for sure but I just figured I would point this out to you.
On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.
There is ready thing for that in bootstrap called scrollspy
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!