I am making my first responsive webpage. It's desktop-first, and since it's a simple one-column page I need only one media query, for mobiles. I have a different nav bar for the desktop from the mobile. So I put both navs in the HTML. I set the nav that is for the mobile to "display:none" in the main part of the css, which makes it disappear from the desktop version. I set the desktop's nav to "display:none" in the query, which makes that nav disappear from the mobile.
The trouble is that I can't make the mobile's nav visible again in the mobile version. How do I undo "display:none" in the mobile query?
(The page is http://www.birdwatching.com/optics/2018_Kowa_scope/kowa-tsn-553-review.html)
Inside the mobile media query do display:block for the mobile nav that you hid, and display none for the desktop nav.
If you use visibility:visible and visibility:hidden instead, you won't have to worry about what the display of the element was previously set to
display:revert will set the display setting to its previous value. This way you don't have to worry about what display type (e.g. block, flex, etc.) it was before it was hidden.
More reading
https://developer.mozilla.org/en-US/docs/Web/CSS/revert
https://css-tricks.com/what-does-revert-do-in-css/
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.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
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 have a responsive Panel that in Mobile becomes scrollable because the dropdown text content is too long.
Mobile dropdown (at least in iOS) only displays a portion of the selection anyways when you select the dropdown.
What's the best way to handle this?
Sample Bootply Here
This is more of a styling issue for IOS rather than Bootstrap, but it looks as though you just need to add an optgroup tag after your last option:
http://www.bootply.com/Xw8pzjoACx
Set the dropdown width in CSS to 100% to stop it overlapping the container.
I believe everyone would have seen, facebook mobile app. Also in many flat UI patterns website.
I would like to make one such Left menu.
THis is what I did now.
Hide the menu initially (display:none)
On click of the menu button. Show the left menu (toogle), and increase the left margin on main content using javascript (style,maregin-left:100px;)
This is working fine, but I just want to know, is this the best practice, and will this responsive?
The design pattern is known as 'off canvas' layout.
Depending on the nature of the content you might not want to have it hidden on larger screen, depends on your requirements.
There is a good example of what I mean here: http://jasonweaver.name/lab/offcanvas/
Where the navigation is visible on full screen and hidden on smaller mobile viewports.
what you re doing is good but for best practice i will use the css3 transform with translate some thing like this
.menu{ -webkit-transform:translateX(-200px)
from there you can use the toggleClass("active") from jquery
.menu.active{-webkit-transfrom:translateX(0)}
hope this help!
Yes, this is a perfectly fine approach and it should behave responsively since it's only taking up 100px of width. If it was a full screen horizontal drop-down menu, then you would have to make sure its contents are responsive, but a 100px wide vertical menu will be fine on just about any resolution (especially if the user can choose to toggle it open or closed).