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;
}
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
I found this really simple way to make responsive menu on w3schools (article) but I have been struggling for a few days trying to center it horizontally.
html
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
CSS
/* Remove margins and padding from the list, and add a black background color */
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: #111;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
I made a fiddle from you linked code: https://jsfiddle.net/gqm7zdf9/
A solid option is to add a wrapper around your UL so that you can move the background-color there. Then you position it inside its wrapper.
HTML
<div class="nav-wrapper">
<ul class="topnav">
...
</ul>
</div>
additional CSS
div.nav-wrapper {
background-color: #333;
}
div.nav-wrapper ul.topnav {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
If you're able (depending on the browsers you need to support) to use display:flex, there's an even way more simple option. You just need to add some CSS:
ul.topnav {
/* ... */
display: flex;
justify-content: center;
}
https://jsfiddle.net/gqm7zdf9/1/
I think you'll be able to continue with your media-queries from there...
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
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?
I am trying to create a menu which has a background image spanning the full width of the screen with the menu contents constrained to 980px in the middle with the menu contents then aligned within the center of that.
Like this: http://d.pr/i/eYcV
But I don't want to constrain the area anymore than 980px as the menu items may increase in the future.
I have the following structure in HTML:
<div class="menu">
<nav class="primary_menu">
<ul id="menu-primary">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>
</div>
With the following CSS:
/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}
Thanks
There're a lot of ways to achieve what you're asking for ... simplest is by using inline-blocks like this
.primary_menu ul{
text-align: center;
}
.primary_menu ul li{
/*float: left;*/
display:inline-block;
margin: 0 20px;
*display : inline; /* for IE7 and below */
zoom:1;
}
Check my answer here : Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?
Changing your .primary_menu li's from float: left to display: inline-block should get the menu items center aligned
try this demo or this demo2
.menu{
background:#ccc;
padding:10px;
}
.primary_menu{
background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
margin:0px;
overflow:auto;
}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;
}
Working jsFiddle - take a look:
http://jsfiddle.net/dane/FyThW/21/
/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
display: inline-block;
}
CSS:
.homeBar li {
float: center;
display: inline;
text-align: center;
font-family: Tahoma;
font-size: 13px;
list-style: none;
}
.homeBar img {
color: #94938e;
margin-right: 30px;
text-decoration: none;
}
HTML:
<ul class="homeBar">
<li><img src="images/friends.png"></li>
<li><img src="images/mail.png"></li>
</ul>
as you can see i tried float: center, but it wont center it..
If the widths of your elements (and thus, your list) are known, you could display the list as inline-block, and apply auto margins to it:
.homeBar li {
width: /* Full width (calculate it manually) */;
display: inline-block;
margin: 0 auto;
}
The width used should be the width of the images, plus padding and margin, after any margin collapse.