Taking nav button out from hamburger menu - javascript

I'm building a semi-progessive top navigation bar.
In the mobile viewport, it would only show logo and hamburger button.
(As you click the button, several navigation menu will come out as well as Log in and Sign up)
-------------------------------
Logo =
Once user hits the tablet viewport, I want Log in and Sign up menu to come out from the hamburger and stays beside the button.
--------------------------------------------
Logo LogIn SignUp =
The menus are tagged as li, of course under ul tag.
I was thinking about getting rid of li tag from those two buttons and take them out from ul, but I have no idea how to do so:(
Any help would be very appreciated.

Add signuploginclass class name in signup and login li elements and then add the css code below in your stylesheet.
#media (max-width:500px){
.signuploginclass{
display: none;
}
}

Related

Mobile menu behavior

hoping you could help. So, Im using xtheme, and wordpress. And I have code to make my mobile menu a fixed top menu, so its always visible. I also have JavaScript to make it retract upon clicking a menu item so the menu doesn't cover the screen.
css to make it fixed:
#media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed!important;
}
}
Javascript:
jQuery(document).ready(function($){
$('.x-navbar .mobile .x-nav >').on('click touchend', function(e) {
document.getElementsByClassName("x-btn-navbar")[0].click()
});
});
This works to a point, however, if you go to this page: https://foresthillcentre.com/mental-health-services/
And try the menu on all of the submenu items (setup to scroll to section on same page) The menu retracts before you can click on anything, and you have to re-click the hamburger to bring up the submenus. You will see what I mean on use...
Any suggestions to fix this?
Thank you.

How do I close the menu when they click outside of the menu?

I am trying to get a jumbo slide in navigation to close when the user clicks outside of the navigation.
I currently have a click event set on a hamburger icon which toggles a class on the navigation. This class uses CSS to reposition the navigation (As well as adds a class to the body tag). The navigation covers around 75% of the screen width. However, I would like the user to be able to close the menu when they click outside this menu and not just the hamburger icon. I currently have the following
$('.c-primary-nav-toggle').on('click', function() {
$(this).toggleClass('open'); /* used to change the style of the hamburger */
$('.off-canvas-nav').toggleClass('menu-in'); /* used to bring the nav into view */
});
$(document).on('click',function(){
$('body').hasClass('mobile-menu-open').find('.off-canvas-nav').removeClass('menu-in');
});
/* Adds class to the body when hamburger is click in order to remove scroll bar from body */
$('body').removeClass('mobile-menu-open');
$(".c-primary-nav-toggle").on('click',function() {
$('body').toggleClass('mobile-menu-open');
});
<body>
<div class="c-primary-nav-toggle"></div>
<div class="off-canvas-nav">
NAVIGATION
</div>
</body>

Delay in bootstrap toggle menu

I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.
It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}

Responsive menu: on hover submenu shows error

Big story short: I created a responsive menu from a tutorial. The menu is supposed to show the submenu when you hover on portfolio button, and when on mobile mode you need to press the button to show the submenu (that works fine). The problem is that the tutorial had a error: if you press the portfolio button in desktop mode the submenu will not show again unless you press (click) the button, like in mobile mode.
Here's the live example: http://armandorodriguez.pe/info
I tried to write the code here but didn't understand the instructions, so here's the jsfiddle: jsfiddle.net/x44w1twf/
So basically what i need is that if I'm on desktop mode it always shows the submenu on hover, even if I press the portfolio button, and in mobile only when i press the button. Now I suppose this can be solved with a simple code in js, but I don't know nothing of js, so any help will be appreciated.
The thin is that when you click on the element to hide it that set the style inline display: none and that overwrite the style:
header nav ul li:hover .children {
display:block;
}
So add !important to the style like this:
header nav ul li:hover .children {
display:block !important;
}
Here a working jsfiddle example
For the normal behavior in mobile just add the style inside a media like this:
#media screen and (min-width: 800px) {
header nav ul li:hover .children {
display:block !important;
}
}

Responsive hover content div into different position

here is my responsive parallax site i’m working on with Concrete5 Bootstrap theme
–> http://testi4.aada.fi/ and there is BUSINESS GROUPS content area in frontpage.
that’s what i’m working on right now.
Now hower image with content opens over div with content (list)..
Now customer wants that hover div opens below image div with list as a content..
http://testi4.aada.fi/files/8214/1744/4748/sample.png
How do i do this??
// Mika
Add a hover class to your li.dropdown
.navbar-nav li.dropdown {
display: block;
}

Categories