Using CSS or JS to auto-expand submenus on mobile site - javascript

I am looking to have my mobile site's menu automatically expand the top menu item's submenu after the hamburger menu is tapped. I have tried using this CSS, but it doesn't work:
.menu-item-has-children {
display: block !important;
}
I noticed that when the top menu item has its submenu opened, an attribute called aria-expanded toggles from false to true.
Is there any way to default that attribute to true without using JS? If not, any JS suggestions would be much appreciated.
Here is a link to the one page on my staging site with this menu applied
This is what the mobile menu looks like currently
This is what I'm trying to get it to look like (submenu expanded)

Related

How to make header section with menu appear, no matter where I scroll to vertically on the page

I have a profile site which is currently hosted on Github pages. I incorporated Bootstrap and it's responsive. I have a header section which contains the navbar menu.
However, my current issue is, on either the desktop or on mobile, when I click any of the nav bar menu links and get taken to the target section, I will have to scroll back up to the header section in order to see the menu and click on another link of choice.
I want to implement a CSS animation, JavaScript or JQuery function or animation that will make it possible for the header and the menu to be visible for clicking even when I scroll away from the top of the page where it is domiciled.
In other words, when I click on the Strengths link and get taken to the Strengths section, I want to be able to touch the screen at that location (on Mobile) or click/scroll/hover (on Desktop), and have the menu appear again for clicking. Instead of scrolling all the way to the top just to click on another link.
ATTEMPTS
i have tried the following:
`
`$(document).on("keypress", function(){
$(".header").css("display", "block");
})
$(document).on("touchstart", function(){
$(".header").css("display", "block");
})
$(document).on("touchstart", function(){
$(".header").hide();
})
$(document).on("keypress", function(){
$(".header").show();
})`
`
But have not achieved the exact objective.
WHAT I EXPECT
When I click on a link of the menu and get taken to the section I have clicked for, I want to be able to touch the screen (on Mobile) or click/hover/scroll (on Desktop) and have my menu appear once again at this current location.
This way, I can always have access to the nav menu at every location/section I am on the page at every given time.
Kindly help on where I'm getting it wrong and what I need to do.
Thank you.

Bootstrap dropdown menu closes its container menu when clicked

I have a Bootstrap dropdown menu on my website, it works fine on desktops and screens larger than 737px, but when it's less than that, the dropdown menu just closes the hamburger menu containing it.
I am using the latest Bootstrap through their CDN and I have checked through this website for answers and also checked their JavaScript to see if there was a problem, but I found nothing, I have also tried stopPropagation, but that didn't help neither.
What am I missing?

Is it possible to modify this script to add a style to an existing class?

I'm still very inexperienced in jQuery but trying to tackle this issue. I have a hamburger menu that opens and closes when clicked. However, I added CSS to the hamburger menu to expand to 100vh when open. This worked fine, however, the content in the background still scrolls behind the menu. I found CSS that locks the body in place via an overflow: hidden styling to the "HTML, body" class and lets me open and close the menu without the background scrolling, but with that CSS styling constantly in place, I cannot scroll at all even when the menu is closed.
This brings me to my question. I believe I found one of the scripts that open and closes the hamburger menu. Would it be possible to modify and add to this script so that it adds the above style to the "HTML, body" class only when the menu is open?
I went through W3 Schools to get a better understanding of the syntax, but this script is a little different than what I saw in the tutorials.
Here is the script:
function() {
return e(".mobile_nav.opened .mobile_menu_bar").not(e(this)).trigger("click"), s.hasClass("closed") ? (s.removeClass("closed").addClass("opened"), n.stop().slideDown(500)) : (s.removeClass("opened").addClass("closed"), n.stop().slideUp(500)), !1
}
Is this a possible solution or is there a better option for me to prevent the background scroll? I would share the link but I have to have it hidden an under-construction page.
Here is a screen shot of what I am seeing on my end.

Make navbar collapse/close on click

i have trouble making the navbar on mobile devices collapse with my website. The problem only concerns the mobile version of the website.
When I click on a menu button, the site scrolls to the correct point, but the navbar remains opened, which is annoying. I tried to give the UL LI elements the same class like the "back" button in the navbar, which can collapse the navbar, but this does not work :/..
Could anyone show me how I can make the navigation bar close whenever a menu item is clicked?
This is the website:
Thanks a lot
You could solve it with jQuery, by just triggering the action of clicking the menu icon, like this:
jQuery('.rd-navbar-nav li').click(function() {
jQuery('.rd-navbar-toggle').trigger('click');
});
This way, when you click an element in the menu, it emulates clicking the hamburger menu icon too.
You can use Jquery if you'd like, but I just use JavaScript on my sites. You can take a look on how to make a collapsible navbar menu with JavaScript here. If you want to close the menu bar whenever a menu item is clicked, just set a close() function in the onClick() attributes if the menu is active and open. The close() function will be the function in which you hide the menu once again.
EDIT: You must define the close() function with in your JavaScript and set it to hide the menu items though.

Drop down links not working in iOS

I have a Wordpress website that has a horizontal menu bar with a drop down sub-menu that appears when hovering over the parent menu item. The links to the sub menu works in a regular browser, however, when using my iPhone, the links to the sub menu do not work. It previously worked only in a long press mode, but I didn't want the long press mode so I added the following code in my CSS to remove the long press mode:
.navWrap .top-bar2 li.menu-item {
-webkit-user-select:none;
-webkit-touch-callout: none!important;
}
and I also added the following javascript (because the CSS didn't work and some people suggested the javascript solution):
<script type='text/javascript'>document.documentElement.style.webkitTouchCallout = "none";</script>
You can test this by going to the following link: http://sa4iserver1.com/~hoffer/ -- at this time, the only menu item that has a drop down sub-menu is the RENT menu item.
Any suggestions on how to make the sub-menu links clickable via iPhone/iPad would be greatly appreciated!

Categories