Responsive menu: on hover submenu shows error - javascript

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;
}
}

Related

Taking nav button out from hamburger menu

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;
}
}

Bootstrap 3 multi level dropdown menu not working in mobile

Bootstrap 3 multi level dropdown menu not working on mobile devices. I checked many solution in StackOverflow. That solution for Desktop not for mobile. Below is the best solutions for multi lebel dropdown menu.
Bootstrap 3 dropdown sub menu missing
https://github.com/djokodonev/bootstrap-multilevel-dropdown
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
Above code is working well for desktop.
Live example: http://rahulmoral.com/portfolio/essanet/
Please view on mobile devices. Second level dropdown-menu will not work on mobile devices.
It's actually working just fine. You need to scroll in order to see the expanded menu. However, to get it to work as you'd like, simply overwrite the max-height:
.navbar-collapse {
max-height: none;
}
i got it to working by adding this to my css
#media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
max-height:100%;
} }
but instead of 100% you can also use none. i am using a fixed nav which is why i have navbar fixed top. u can change it to static or w.e. you are using.

How to reposition things in a CCS media query

I have a navigation menu that is responsive using css media queries. When the nav is in desktop/laptop view the whole menu works fine. The nav tags are placed under an image in laptop desktop view which is how I want it but When it is in mobile view I need the nav tags and everything inside it to be placed about an img. I already have a css media query setup with some other styles in it but I think I need a javascript to do what I want.
Hope someone can help,
Thanks
Below are the media queries that I used for your question,
#mobileImg{
display:none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
#desktopImg{
display:none;
}
#mobileImg{
display:block;
}
}
Here is the working demo
So to explain what I did, I have two images one with the id desktopImg and other as mobileImg. The desktopImg is above the nav tags and mobileImg is below the nav tags. Using the media queries, I'm setting the display of mobileImg as none for desktops/laptops. Similarly for mobile view, I made the mobileImg visible and the desktopImg invisible by making its display as none

Javascript is Disabling CSS Hover ...?

I have the following menu: http://codepen.io/mdmoura/pen/alxkI
The "Content" item has a submenu which is shown using the CSS (Code Line 79):
&:hover {
& > ul {
display: block;
} // ul
} // hover
When I resize it to mobile I use javascript to open / close the submenu on click.
When I resize again to desktop the submenu stops to work ...
It is like the Javascript is disabling the CSS. Is this possible?
What am I missing?

Responsive CSS /java script DIV - show on click only on mobile query

I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.

Categories