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;
}
Related
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
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
Wow I am really struggling.
I have created responsive themes for many many sites but can't get it to work on my own!
The dev version of the site is at Development Site and the CSS for the phone part of the stylesheet is below:
#media only screen and (max-width: 767px) {
* {
float: none!important;
width: 100%!important;
}
#container, #home-boxes, #header, #home-scroller, #main-nav, #main-footer, #content, #sidebar {
width: 100%!important;
overflow:hidden;
float: none;
}
.wrapper {
width: auto;
margin: 0;
}
#header {
width: auto;
}
#home-scroller h1 {
font-size: 50px;
}
#home-scroller h1 span {
font-size: 30px;
}
#home-scroller p.home-price {
font-size: 30px;
}
#home-scroller a.button, #home-scroller a.buttonalt {
display: block;
}
#home-scroller p.bottom {
position: inherit;
}
ol.dots { display: none; }
#home-scroller li {
width: 100%;
}
#main-nav {
float:none;
}
#home-boxes-inner .home-box, .footer-box {
float: none;
width: 100%;
margin-right: 0;
}
img {
width: 100%;
height: auto;
}
#logo {
float: none;
}
}
As you can see if you visit the site on a mobile it's not even close to being anywhere near correct.
Does anyone have any pointers on where I should be looking?
Much appreciated!
The hard coded html-width conflicts with this nice meta setting :
html {
min-width: 1060px; /* hard coded width for large screens */
}
#media only screen and (max-width: 767px) {
/* new: fit viewport to small device screen */
min-width: 100%
}
Try changing your meta width tag from
<meta wisth...
To
<meta width...
I want the elements of a navbar to be on the center, I have the following html:
<div class="navbar navbar-default navbar-fixed-bottom" style="bottom:50px; background:none; border:0px; box-shadow:none;">
<div class="navbar-inner" style="float: none;">
<div class="container-fluid" >
<ul class="nav navbar-nav" >
<li><img class="social-media" src="images/facebook.png"></li>
<li><img class="social-media" src="images/twitter.png"></li>
<li><img class="social-media" src="images/linkedin.png"></li>
</ul>
</div>
</div>
</div>
and here is my css:
.social-media {
opacity: 0.4;
margin-left: 15px;
width: 32px;
height: 32px;
}
.social-media:hover {
opacity: 1;
margin-left: 15px;
width: 32px;
height: 32px;
}
I tried to use text-align:center; on navbar inside the html but it didnt work. Any idea how can I solve this?
I've tried to change the bootstrap.css to
#media (min-width: 768px) {
.navbar-nav {
float: none;
margin: 0 auto;
float: none;
width: 100%;
}
.navbar-nav > li {
float: none;
text-align: center;
}
and now I have this:
after editing bootstrap.css to :
.navbar-nav {
margin: 0;
display:inline-block !important;
float:none !important;
}
I finally got:
i think you need to set the float:none; on UL and text-align:center; on parent of UL
try the below css on UL and
*remember I am considering bootstrap 2.3.2 version NOT v3.X (if any not sure) if u are using other version let me know.. *
.navbar-nav {
display:inline-block !important;
float:none !important;
}
.container-fluid {
width: 100%;
text-align:center;
}
check the below bootstrap sample
If you have set .navbar-nav li as inline-block, add text-align:center to .navbar-nav, this will position your icon in the center of navabar.
.navbar-nav{
text-align:center;
}
.navbar-nav li{
display:inline-block;
}
Try this:
.navbar-nav {
width: 100px;
margin: 0 auto;
}
.container-fluid {
width: 100%;
text-align: center;
}
By setting the left and right margins to auto, you are telling it to make both margins the same, which will center it. Do not remove the text-align: center.
So I have to menus ul's one is not floated (left) and the other is floated to the right. The problem is that the right one does not return on it's origin place after resizing the browser window.
Preview: jsFiddle
Image: http://i.imgur.com/iHTbQ5d.png
HTML:
<div class="wrapper">
<ul class="menu">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
<ul class="menu right">
<li>Option4</li>
<li>Option5</li>
</ul>
</div>
CSS:
.wrapper
{
width: 100%;
}
.menu
{
display: inline-block;
}
#media (max-width: 399px)
{
.menu
{
display: block;
}
}
#media (min-width: 400px)
{
.right
{
float:right;
}
}
It works fine on Firefox but in webkit, you need to float that and put a clear on the menu:
http://jsfiddle.net/UTCE6/
.wrapper
{
width: 100%;
}
.menu
{
display: inline-block;
}
#media (max-width: 399px)
{
.menu
{
display: block;
clear:both;
float:left;
}
}
#media (min-width: 400px)
{
.right
{
float:right;
}
}
Why you are not using it like simple ?
.wrapper
{
width: 100%;
}
.left{
float:left;
}
.right{
float:right;
}
DEMO