How can I get this navigation bar to center?
The class menu I suppose is built in with bootstrap.min.css.
#header {
position: fixed;
width: 100%;
z-index: 999;
}
#header .header-content {
margin: 0px auto;
max-width: 1170px;
padding: 60px 0;
width: 100%;
-moz-transition: padding 0.4s;
-o-transition: padding 0.4s;
-webkit-transition: padding 0.4s;
transition: padding 0.4s;
}
.navigation {
float: right;
}
.navigation li {
display: inline-block;
}
.navigation a {
color: white;
font-size: 15px;
font-weight: bold; /* Normal - Bold - 400 */
margin-left: 30px;
letter-spacing: 4px;
text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
color: white;
}
<header id="header">
<div class="menu">
<div class="header-content clearfix">
<nav class="navigation" role="navigation">
<ul>
<li><a data-scroll href="#sec1">Inicio</a></li>
<li><a data-scroll href="#sec2">UEFA</a></li>
<li><a data-scroll href="#sec4">Equipo</a></li>
<li><a data-scroll href="#sec3">Contacto</a></li>
</ul>
</nav>
Menu<span></span>
</div>
</div>
</header>
If you remove the float: right from .navigation and you set text-align: center to that div you can center it.
https://codepen.io/anon/pen/BmBPej
Related
The navbar-collapse collapses/disappears when clicking a menu link to an actual "page" but it doesn't collapse/disappear when clicking a "custom" menu link to scroll to a different section on the same page.
I have the navbar-collapse appearing as a full screen when toggling the Hamburger Icon. The JQuery fixes this but it still doesn't work on IOS Safari.
HERE IS MY CSS
* { cursor: pointer; }
#site-header{
height: 85px;
top: 0;
z-index: 3000;
}
.logged-in #site-header{
top: 32px;
}
#primary {
margin-top: 85px;
}
.nav {
display: block;
}
.navbar {
height: 75px;
width: 100%;
padding: 0;
background: black;
}
.navbar-nav {
float: none!important;
}
.navbar-collapse {
position: absolute;
background: black;
width: 100%;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 35px;
border: 0px;
margin-top: 0px;
height: 110vh;
left: 0;
top:0;
background-size: cover;
}
.navbar-image {
position: absolute;
opacity: .2;
right: 0px;
top:0%;
margin-top: -15px;
padding-left: 30px;
padding-right: 30px;
bottom: 0;
margin: auto;
z-index: 1;
}
.navbar-image:hover, .navbar-image:active {
-webkit-transition-duration: 5.8s;
-moz-transition-duration: 5.8s;
-o-transition-duration: 5.8s;
transition-duration: 5.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .01s;
-moz-transition: height .01s;
-ms-transition: height .01s;
-o-transition: height .01s;
transition: height .01s;
}
.navbar-collapse ul {
position: absolute;
margin-left: 50px;
margin-top: 80px;
z-index: 2;
}
.navbar-collapse ul li {
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-collapse ul li a{
color: white!important;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
}
HERE IS THE HTML
<header id="site-header" class="container-fluid">
<nav class="navbar fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler disable" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar top-menu"></span>
<span class="icon-bar mid-menu"></span>
<span class="icon-bar bottom-menu"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav">
<li class="menu-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="nav-link" href="#">Somthing Else</a>
</li>
</ul>
</div>
</div>
</nav>
JQUERY
(function ($) {
$(document).ready(function () {
$(".navbar-collapse ul li a").on("click", function () {
$(".navbar-collapse").collapse("hide");
});
});
})(jQuery);
I have a logo image on the upper left side of the site and want my nav to show on the upper right side of the site. The nav is showing on the right side of the page but instead of being parallel to the logo it is below it even thought the logo is on the left side. Any idea what I am missing in the code below that is preventing the nav from moving up.
#charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
<!-- font-size: 1vw;>
background: white;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
a, a:visited {
color: inherit;
}
header {
position: fixed;
padding: 1.5em;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.site-logo {
width: 30%;
max-width: 30%;
position: relative;
display: block;
}
.site-logo img {
width: 22em;
}
.logo {
opacity: 1;
}
.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 68%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid black;
}
HTML
<header>
<!-- Logo -->
<a class="site-logo">
<img class="logo" src="images/SBI Logo.png" alt=""/>
</a>
<!-- Navigation Menu -->
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
enter image description here
You are getting bogged down in the style sheet and using EM too, it would be much easier for you to use PIXELS instead of EM to position your elements.
<style>
.mysitelogo
{
margin-top: 16px;
width: 458px;
height: 114px;
}
.mysitenav
{
float: right;
padding: 8px;
opacity: .95;
}
</style>
<header>
<!-- Logo -->
<img class="mysitelogo" src="logo.gif" alt="" />
<!-- Navigation Menu -->
<nav class="mysitenav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
Using the code above you can get the layout you desire, THEN fine tune your layout in the stylesheet.
Some times it is easier to break the bigger problem down into basic parts.
Read this page for better understanding of using EM which is relative to FONT SIZE
https://www.w3schools.com/CSSref/css_units.asp
Is there a better way of making footer menu for responsive? rather than duplicating and display: none; in the css?
Here are my attempts:
<header class="row">
<div class="container">
<div class="col-12 columns">
<img src="images/logo.png" alt="" class="logo">
Navigation
<nav role="primary" >
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
Footer nav. Commented out the nav for the purpose of this question.
<nav role="secondary_menu">
<!-- <ul id="nav2">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav> -->
<footer id="footer">
<div class="container">
<p>Created by: </p>
</div>
</footer>
CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
float: left;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
So the codes above shows when the screen is below 600px however this way it pushes the footer the menu rather than at the bottom, Sure I positioned the footer absolute but it just sits above the menu rather than under it. So I made another attempt which I duplicated the nav and just hiding the when its below 600px.
position:none
position:absolute
Trying to achieve without duplicating and remove whitespace
I saw your main nav was set to position: absolute. I would suggest looking at CSS templates to see how they structure things like footers. For example, http://bootswatch.com/default/ Try this CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
margin-right: -15px;
margin-left: -15px;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
Right now the parent menu has an opacity shift on hover, this is being transferred to the sub menu (current & previous) as well. I want the sub menu to have a clear background so that the opacity band of the parent is the only thing that is visible. Is there a way to use an li class for the submenu that makes it exempt from the li class that is governing the parent. I've been trying different things but can't seem to make it work properly.
Demo
HTML
<div>
<ul id="mainmenu">
<li class="liHome">
<a class="maintextcolour" href="#item-x1y1" id="Home" rel=
"none">INFO</a>
</li>
<li class="liServices">
<a class="maintextcolour" href="#item-x1y2" id="Services" rel=
"SubMenuY2">EXHIBITIONS</a>
<ul class="submenu" id="SubMenuY2">
<li class="sub1">
<a class="maintextcolour" href="#">CURRENT</a>
</li>
<li class="sub1">
<a class="maintextcolour" href="#">PREVIOUS</a>
</li>
</ul>
</li>
<li id="liEnvironment">
<a class="maintextcolour" href="#item-x1y3" id="Environment"
rel="none">CV</a>
</li>
<li id="liCareer">
<a class="maintextcolour" href="#item-x1y4" id="Career" rel=
"none">NEWS</a>
</li>
<li id="liContact">
<a class="maintextcolour" href="#item-x1y5" id="Contact" rel=
"none">MORE</a>
</li>
</ul>
</div>
CSS:
#charset UTF-8;
/* CSS Document */
body {
background-color: #666;
background-size: 100%;
background-repeat: no-repeat;
}
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}
#mainmenu li {
clear: left;
position: relative;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
width: 100%;
position: relative;
opacity: 1;
-webkit-transition: all .4s ease-in-out;
padding-left: 20px;
}
#mainmenu li:hover a {
background-position: 0 0;
background-color: clear;
background-color: rgba(255,255,255,0.5);
width: 100%;
opacity: 0;
-webkit-transition: none;
}
#mainmenu li.active a {
background-position: 0 0;
background-color: clear;
width: 100%;
}
.submenu {
list-style-type: none;
float: left;
display: none;
position: absolute;
left: 135px;
top: 0;
width: auto;
}
#mainmenu li a:hover + .submenu,.submenu:hover {
display: block;
}
.submenu li {
display: inline-block;
clear: none !important;
}
.submenu li a {
float: right;
margin-left: 10px;
}
.maintextcolour {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
}
.maintextcolour:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #0FF;
text-decoration: none;
}
.headertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
Here is the updated Fiddle link. I have just added color to the following css:
#mainmenu > li:hover > a {
background-position: 0 0;
background-color:clear;
color:#0fffff;
background-color:rgba(255,255,255,0.5);
width:100%;
\
opacity: 0;
-webkit-transition: none;
}
Hope you want this.
I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?
Please note: I removed the UL from Heading 1 for the sake of the demo because it was preventing Headings 2 & 3 from toggling.
You made several mistakes. Too many to count:
Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/
HTML
<div id="wrap">
<div class="accordion">
<div id="two" class="section">
<h4>
Heading 2
</h4>
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div>
</div><!--#two-->
<div id="four" class="section progress">
<h4>
Heading 4 (With Progress Bar)
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div><!--.sub_section-->
</div><!--#one-->
</div><!--accordian-->
</div>
CSS
#wrap {
width: 320px;
background: #f0f0f0;
margin: auto;
}
.accordion {
clear: both;
padding: 0;
margin: 0 auto;
}
.accordion h4 {
margin: 0;
}
.accordion h4 a {
padding: 1em;
color: #999;
display: block;
font-weight: normal;
text-decoration: none;
}
.accordion h4 a:hover {
text-decoration: none;
background: #111;
}
.accordion .section {
background: #222;
border-bottom: 1px solid #000;
}
.accordion .sub_section {
border-bottom: none;
background: #f0f0f0;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: url('http://www.placehold.it/40x40') no-repeat;
color: #999;
list-style: none;
padding: .7em .7em .7em 4em;
border-bottom: 1px solid #fff;
}
.list .last {
border-bottom: none;
}
.accordion .sub_section {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h4 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target .sub_section {
height: 80px;
}
.accordion .section.large:target h4 + div {
overflow: auto;
}
.accordion p {
color: #646464;
}
.accordion .progress .meter {
width: 90%;
height: 2px;
position: relative;
background: #555;
margin: -.9em auto .5em auto;
padding: 1px;
}
.meter > span {
height: 2px;
display: block;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
This is because the class "progress" assigned to the div id="one" that keeps constant the size of the div with the content.