On responsive website, I would like to display a vertical menu on smaller screens and a horizontal menu on larger screens.
Currently, the following HTML and CSS code does NOT display a vertical menu on smaller screens. Can any one please revise/improve this code? Thanks in advance.
#menu {
width: 100%;
min-height: 40px;
position: relative;
background-color: rgb(52, 85, 154);
}
#menu a {
display: inline-block;
padding: 10px 4% 0px 4%;
font: 400 16px/32px 'Courier', sans-serif;
min-height: 40px;
color:white;
text-decoration: none;
font-weight:bold;
transition: .5s;
}
#menu a:hover {
color: red;
background-color: blue;
}
#media screen and (max-width:640px) {
#menu {
max-width: 100%;
}
}
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
}
}
#media screen and (max-width:980px) {
#menu {
max-width: 100%;
}
}
<body>
<nav id="menu"> Home About Services Blog Links FAQ Contact
</nav>
</body>
When creating a responsive site, the main navigation is usually the trickiest because of the often requirement to display the items vertically (and within a hamburger dropdown/flyout) on a mobile screen and then horizontally on a desktop screen
The first step is to develop it using a mobile first approach. This means:
Style everything so that it looks good on a small screen
Use media queries to progressively style larger screen sizes
Here is a basic snippet of how to style a menu so that it shows vertically in a small screen and horizontally in a large screen.
/* Mobile style first */
.menu {
text-align: center;
}
.menu a {
display: block;
padding: 10px;
}
.menu a:hover {
background-color: #eee;
}
/* Desktop style after */
#media (min-width: 600px) {
.menu a {
display: inline-block;
}
}
See this jsFiddle for an example
add a display: block; declaration here:
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
display: block;
}
}
You can try the following code snippets
HTML
just add a span tag right above the nav tag
<span id='trigger'> Menu </span>
CSS
In the initial menu a tag definition change the display to block from inline-block and set float to left.
And then put the following:
#trigger {
display: none;
}
#media screen and (max-width: 560px /* just as an example*/) {
#trigger {
display: block;
}
#menu {
display: none;
}
div.expand {
display: block;
}
#menu a {
float: none;
border-bottom: 1px solid;
}
}
Javascript
jQuery("#trigger").click(function() {
jQuery("#menu").slideToggle(500, function() {
jQuery(this).toggleClass("expand").css('display','500');
});
});
I hope this helps
Related
I started my first site from making mobile version. After that, i tried to add #media screen and (min-width: 500px) for desktops, but after that my mobile site looks like desktop. I don't understand why and don't know how to fix it. I kept mozilla's tutorials and that's it.
/* CSS */
body{
background-color: yellow;
display: flex;
margin: 1em;
flex-flow: row wrap;
}
html{
font-family: sans-serif;
}
header{
order: 0;
background-color: black;
color:blanchedalmond;
font-size: 3em;
padding: 0.5em 1em;
border-radius: 1em;
}
header nav{
border-top: 1px solid #999;
margin-top: 0;
}
header ul{
list-style: none;
padding: 0;
margin: 0;
}
...............
#media screen and (min-width: 500px)
{header{
display: flex; /* separate the nav and title */
justify-content: space-between;
align-items: center;
font-size: 1em;
width: 100%;
}
header ul {
display: flex; /* mav navigation display using flexbox */
}
header li {
margin: 0; /*remove the margin used in the mobile design */
}
header nav{
border:0;
}
}
Thanks in advance
if you want to make mobile first website you should
declare a max-width media-queray first at the above code and then the rest of your code will be applied to the desktop version
if you want to understand how both of them works
read below
Media Queries Demystified: CSS Min-Width and Max-Width
for mobile version.
#media screen and (max-width: 500px)
and then the rest of your code will apply for desktop-version
What would be the best way to center the navigation on this wordpress page:
tried this:
#media (min-width: 768px) {
.navbar-nav {
float: none;
padding: auto;
}
.nav {
padding-left: 10%;
}
}
from here: https://colorlib.com/wp/forums/topic/how-do-i-center-my-sites-navigation-bar/
but has absolute no affect
Thanks in advance.
Add this snippet in your style :
#media only screen and (min-width: 60.001em){
.main-navigation-menu>li {
float: none;
display: inline-block;
}
#menu-oberes-menue {
text-align: center;
}
.main-navigation-menu ul li{
text-align:left;
}
}
<div class="menu-wrap"> // need to add this div before ul
<ul id="menu-oberes-menue" class="main-navigation-menu">
{your menu list}
</ul>
</div>
Add your css
.menu-wrap {
display: table;
margin-left: auto;
margin-right: auto;
}
my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
enter image description here
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</script>
Solution
ul.topnav.responsive {
position:relative;
z-index: 10;
}
Add z-index property to specify the stack order.
I have a media query to make my navbar buttons vertical on small screens, but when this happens there is blank space to the left of each button and I don't know why, as there is no left margin in my code. Thanks in advance to anyone who can get rid of this.
CSS:
/* Navbar */
#navbar {
background-color: #599;
list-style-type: none;
overflow: hidden;
margin: 0px;
width: auto;
text-align: centre;
font-family: 'corbel','arial';
text-align: center;
}
#nav_li {
float: left;
display: inline;
text-align: center;
}
#nav_a {
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
/* Media queries for smaller screens*/
#media screen and (max-width : 350px){
/* reduce padding */
header nav a{padding:.7em .7em; }
[role=main]{padding:1.5em 1.5em;}
/* make navbar vertical */
#nav_li{text-align: center;
border-bottom: 1px solid #eee;}
#nav_li, #navbar_a{width: 100%;}
HTML:
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='testimonials.html'>Testimonials</a></li>
<li id='nav_li'><a id='nav_a' href='contact.html'>Contact </a></li>
</ul>
By Default UL Element Take some padding from left. You need to add below css to resolve this:
#navbar {
padding: 0px;
}
I want to create a simple navigation menu with a special feature:
On a desktop browser it shows as a bar like "item1 | item2 | item3"
On a mobile browser it shows a button. When tapping on it, it shows the menu as stack
I'm searching a solution without Javascript. I know about media queries in CSS but I don't know how to add a menu with this requirement.
This is the menu for example:
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</nav>
CSS:
/* default for all browsers */
nav>ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #3d3d3d;
}
nav>ul>li>a {
display: block;
color: #ffffff;
}
#media only screen and (max-width: 360px) {
/* mobile */
/* WHAT NOW? */
}
#media only screen and (min-width: 361px) {
nav>ul>li {
/* bar layout */
display: inline-block;
}
}
fiddle: https://jsfiddle.net/1fg4qkx5/
i have edited your jsfiddle and found a rather "Simple" solution for you,
jsfiddle
I have not (yet) found a way to do this completely without javascript to catch the button click.
to post out the results here:
HTML
<nav>
<button class='hide-lg right'>
☰
</button>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
css
/* default for all browsers */
*{
margin: 0;
padding: 0;
}
body{
min-width: 100%;
min-height: 100%;
}
button{
border:1px solid gray;
background-color: transparent;
display: inline-block;
}
.show{
display: inline-block;
}
.right{
float:right;
}
nav{
background-color: #3d3d3d !important;
color: #ffffff;
height:auto;
width: 100%;
display: block;
}
nav>ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #3d3d3d;
}
nav>ul>li>a {
display: block;
color: #ffffff;
}
#media only screen and (max-width: 360px) {
.hide-lg{
display:inline-block;
}
ul{
display: none;
}
/* mobile */
/* WHAT NOW? */
}
#media only screen and (min-width: 361px) {
.hide-lg{
display: none !important;
}
nav>ul{
display: block;
}
nav>ul>li {
/* bar layout */
display: inline-block;
}
nav>ul>li>a{
display: block;
width:100%;
height: 100%;
}
}
Javascript/jQuery
$(document).ready(function(){
$('button').click(function(){
$('ul').toggleClass('show');
});
});
I hope you find my answer helpfull,
Giovanni