I am using a nav walker to enable drop down menus using bootstrap in Wordpress, and it all works fine. What I am trying to figure out is there a way to disable the drop downs on mobiles, perhaps using media queries?
The reason I want to do this is because there are a lot of pages and some links are on a 3rd tier which flies off the mobile screen. The top level navigation have links to the sub menu items anyway, so in mobiles I would like to just have the top level items shown, and disable the sub menus from being displayed.
Also I am not using the nav collapse with icons, as I didnt want to use it on this project.
Yeah it can be done by Media Queries. This one targets mobile devices:
#media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
.navigation {display:none;}
}
Of course, you will have to keep an eye out for the sizes of the screens now days. One alternative solution would be in JavaScript, and check the userAgent:
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|webOS|Windows Phone)/i)) {
// I'm a mobile :-)
}
Related
In desktop view we have a left pane and a side pane. The left pane has a great deal of content, so much so that when rendered on a mobile device the side pane is missed by users.
When rendered on a mobile device the left pane is rendered first and then the side pane is rendered after the left pane. Is there a way to change this behavior so that the side pane is rendered above the left pane when in a mobile browser?
The first element found in the skin will be the first one rendered. There is no way to change that (as far as I know).
But it could be as easy as switching two div elements in the DNN skin page.
<div id="SidePane" class="SidePane" runat="server">
<div id="LeftPane" class="LeftPane" runat="server">
instead of
<div id="LeftPane" class="LeftPane" runat="server">
<div id="SidePane" class="SidePane" runat="server">
But depending on the CSS and the HTML design of the skin this could be an easy fix or completely destroy the site design. If you bought the skin at the DNN store (or another vendor) it could be worth trying to ask the seller.
We ended up accomplishing our goal by having a separate page for mobile with a different layout. DNN then has a capability to redirect to a different page if mobile device detected.
To place one pane over the other on certain screen sizes, we use z-index.
To do this, simply change your pane z-index using css:
#media (max-width: 767px) {
.leftpane{
z-index: 2;
}
.sidepane{
z-index: 3;
}
}
Let me know if this works for you. Thanks!
I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example:
<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown" options, or "small-drilldown", it targets all media queries. I know that I could call two instances of wp_nav_menu, with show-for-small-only and show-for-medium-up, but I wonder if I can achieve this without printing two equal menus.
You just need to add the responsive class that tells the menu to be horizontal from medium and up, like so:
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
Update: The bugs related to the dropdown arrows and submenu fold out direction in the responsive menu have been fixed in the release of foundation-sites 6.2.0.
Coding isn't my strongest point, noticed on mobile devices and zooming on browsers that the main nav bar disappears.
http://kizzme.co.uk/index.html
Any help appreciated!
Kizz
in your CSS you are hiding the navbar on mobile with out showing a mobile nav ,
to show the nav any way add
#nav {display: block !important;}
to the end of this file http://kizzme.co.uk/css/lessframework.css
or if you want to make a mobile navbar
check this http://navnav.co/
I am new to Drupal. I have two webforms in a page. In Drupal on creating multiple webforms they are placed below one another. I want to place them side by side.
There're variety way of doing it. Maybe the easy way through UI is to use panels module, and then setup a two column layout, after that you can drag each webform into one if webform has a block display.
You can achieve the same thing through hook menu and do your own theming, but that will cost a bit more time, I guess.
This is old, but for anyone else that stumbles in here, just use CSS.
#media screen and (min-width: 719px) {
form#webform-client-form-30 {
width: 48%;
float: left;
}
}
Mobile first, so put them next to each other if the screen is > 719px. Add padding, margin, etc if desired.
Is there a way to implement show hide divs in a responsive website once the viewport contracts to say a width of 500px?
What I want to do is when the viewport contracts to the width of 500pixels each of the current divs can be hidden by show hide or a toggle or some kind of accordion?
What this means is that these functions do not "kick in" until the viewport contracts to this width.
Is this possible?
Here is the site I need to do this on:
http://surfingthebluemarble.com/mnews.html
Right now when this site contracts, the content is way too long. I need to hide to be able to hide and show those divs on click.
Thanks in advance for your help as always.
Regards,
umbre gachoong
Yes, you can create css targeted to certain viewports (screens)
e.g.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Refer this