I have a responsive theme. When viewing the website on small screen, it shows "menu" and you have to tap it to see the menu items. What I want to do is show the menu items straight without the user having to tap "menu" before seeing them. I tried using Firebug to see what triggers it and tried removing that. But that messes up my whole site in desktop view as well.
Here is the link. If someone could point me in the right direction by telling me what code to remove that'd be great. Your help is really appreciated.
I believe it is hidden via css. So to initially show that menu when the browser is mobile go into the bootstrap-responsive.css file on line :1424 and change 'display:none' to 'display:block'. Just to be clear this is the code your looking for.
nav#main_menu.smooth_menu ul {
display: none;
background:#fff;
}
It is in the #media (max-width: 767px) media query.
That should initially show the menu when a user is on a mobile browser while keeping the toggle functionality.
Add the below <script> in your page inside <head>. What it does is simulate a click on "menu" at startup.
<script>
$(document).ready(function() {
jQuery('.zn_menu_trigger a:visible').click();
});
</script>
Related
I have a nav element with my navigation in it. The nav is displayed by default. The idea behind this is that the menu should be visible (also in case the user has JavaScript deactivated).
However, if the user has activated JavaScript, then the navigation should not be visible. To achieve this, I use the document-ready handler
$(function () {
$("html").addClass("js");
}
to add the class js to html element. If this class is there, my CSS kicks in and the navigation is no longer displayed with .js nav { display: none; }. At the same time, a button is displayed instead, which the user can use to display the navigation again.
And this causes the following problem:
When the page is loading, the navigation is shown for a few moments before JavaScript hides it. Because the navigation appears and then disappears, the entire layout visibly shifts. Google PageSpeed Insights also complains that a large Cumulative Layout Shift is taking place in the page.
How do I prevent this layout shift?
Use visibility: hidden instead of display: none.
I am trying to create a sidebar navigation alot like this website:
http://www.josephleonard.com/
I am currently using the Adaptive Theme in drupal and using panels. I have the whole layout perfectly. All I need to figure out is how to trigger a panel after selecting an item on the menu as it does on this website. Any help will be appreciated!
Use CSS to hide your pop out panel by default. display: none; then use JQuery to show your pop out panel when a menu link is clicked. See this post for both a CSS and jQuery solution. https://css-tricks.com/snippets/jquery/styled-popup-menu/
I have a problem on my website using JavaScript tabs where the tab names are included in the scrollbar, rather than just the content of the tabs, and so when the user scrolls down, the tab names disappear. I've put the code I have on JSFiddle linked below. If it's relevant, I'm embedding this in my site's main page by using:
<iframe class='demo' src='tabs.html' style='height:350px; width:700px' frameborder='0'></iframe>
http://jsfiddle.net/08ghjmnv/
Can someone please show me how to change my code so that the tab names/headers are not included in the scrollbar, so they're always visible for the user to click to change tabs?
Thanks in advance :) .
Try this.
.tabs {
position: fixed;
}
Demo here
Can't clear the problem with conflicting modules and menu. I have tried to disable jQuery and JS, use non conflict but there is a problem with mobile menu (you should minimize browser window to see mobile menu) on the website. Sometimes it appears on homepage when mobile menu goes behind the slider and is not visible. However if you go to NEWS page you will see calendar icon also conflicting with mobile menu. Do anyone have any solution?
Thank you!
You need to order the elements with z-index in the right order.
Add this code to your css file templates/shaper_helix_ii/css/template.css
.sp-mobile-menu{z-index: 9999;}
.sp-main-menu-toggler{z-index: 99999;}
I'm trying to understand how this kind of menu works : www.dantobinsmith.com/
How do you make the page associated with one of the menu items appear when you put your mouse over it?
Looking at the code base of the website I see that the developer has created the website primarily in JavaScript/JQuery where there is a full screen navigation that fades in the content when hovering on the correct navigation.
On clicking of the navigation item, the whole navigation is removed and the content appears at 100% opacity.
The website IS build oddly on Wordpress for backend editing, BootStrapper (getbootstrap.com) and JQuery and any additional javascript can be found here http://www.dantobinsmith.com/wp-content/themes/dts/app.min.js to inspect yourself.
you could do it with css:
#input:hover { background-coler:blue; /*additional css for #input on hover */}
or javascript:
<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>