I am using bootstrap with my wordpress site , its perfect when we uploaded to live server but when we hover over/ click nav item in mobile this is what happens
right now if i click on any of the nav items its not clicked and bottom one comes just right to upper one , now i don't remember if i modified some css for navigation code while doing this site but what i expect a single css rule will make it fine can someone help me to fix this ?
In hover and click some css get overrides which is applied for desktop version.
You have to override desktop version css with media query for mobiles.
Related
I've had many issues implementing a responsive navigation. Fix an issue and it creates another. T
he newest problem I have to deal with is I can click on the ul links when the responsive navigation is closed.
Have a look at www.smij.com.au on mobile device to see the issue.
Please comment if you have any other issues with the website. Appreciate all the feedback
Your li elements have a CSS rules for opacity 0 and after you show the nav they change their opacity to 1. The elements are still there, but they are not visually visible so you can click on them.
Usually dropdown menu is hiding ul dropdown element entirely with JS or with some CSS. There is much working examples on codepen.
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I am creating a theme with Bootstrap and I would like my top menu to have:
about, home, contact etc., and another icon for messages. (you can check this image)
But when the page is viewed on mobile I would like the menu to collapse as in this image
But only the messages icon to be still visible.
Currently it is not, any ideas how I can do that?
Wrap the image icon with .visible-xs class example:
<img class="visible-xs" src="...">
Here is the link for more information:
Responsive utilities
My website has a pretty long navigation bar that shows perfectly on a computer browser. However, when I load the website on a tablet or a smaller browser, the navbar turns in 2 rows.
Like this:
Now my question is, is it possible to make the navbar smaller or the text so that the navbar shows as it should? Like this:
http://puu.sh/90e1O.png
I've tried to play a bit with the Viewport, but that didn't helped me much :/ Here is a live preview:
http://website.craftshark.net/mcprofile/
You can get the code by the inspector mode. I do have a gist of the Nav here tho, but it could be incomplete: https://gist.github.com/matthijs110/b7c554f0abd4c38fa3c4
Does someone know how I can fix this?
Try this, it should work http://www.bootply.com/mjEnd2pAem
I don't recommend using this from line 44-46:
<ul class="domain">
<li><h4 id="domain" title="<?php echo $lang['NAV_IP-TOOLIP'] ?>">play.domain.com</h4></li>
</ul>
Because you're wrapping the url with your custom class and the bootstrap menu's css is not affecting this part. You're better off putting it in a and add your custom class to the a instead of ul
EDIT:
Actually, it breaks into 2 line if the resolution is smaller than 993px. Let me see if I can find you another solution
I thinks problem is that you use custom padding-left for div with id=domain, and you wrap link play.domain.com by html tag .
Bootstrap uses css selectors like .navbar-nav>li>a. There is no place for <h4>. Try to use Bootstrap's navbar as it is without customization indentations (paddings, margins) and everything will be work fine.
I'm having trouble trying to figure out why via mobile (iPhone, iPad, etc.), the sub-cateogories on my nav menu won't open. I have installed here: http://thebrlab.com/ugo-mozie/index.html Here is the original example demo of the nav menu http://thebrlab.com/ugo-mozie/menu.html (which works well when I tap the headers on mobile)
The reason that it won't work is because the device can't sense whether you are hovering over it. It only senses when you touch it and it is non-clickable
Seeing as the link goes nowhere remove the href off the a tag and if you want to have a pointing cursor (clickable content) add this css rule:
cursor: pointer;
This way it will work on mobile and the page won't keep refreshing when you accidentally click it