I am looking to display my logo in the middle of my centered top navigational menu. As it stands right now, I have the logo sitting on top of it. Would it be easiest if I split the menu items into different containers and then used margins and padding to accomplish this? Or is there a more efficient way?
Here is a JS Fiddle showing my current scenario. JS Fiddle
Here is my current CSS:
.container {
width:960px;
margin:0 auto;
}
header, main{
display: block;
}
.container-narrow {
margin:0 auto;
width:640px;
}
h1.logo {
width:300px;
margin:0 auto;
text-indent:100%;
overflow:hidden;
white-space:nowrap;
}
body h1 {
background:url(http://placehold.it/300x80) no-repeat;
height:80px;
}
body section.menu,body header.top-section {
background:url(../img/menu-bg.png) repeat;
padding:60px 0;
}
body header.top-section {
padding:40px 0;
position:absolute;
top:0;
left:0;
width:100%;
z-index:50;
}
#menu_container {
letter-spacing: 2px;
font-family:'intro_regular', sans-serif;
font-size: 1.3em;
line-height: 1.3em;
position: fixed;
margin: 0;
/*margin-top: -70px;
position: relative;*/
z-index: 20;
left: 0;
right: 0;
text-align: center;
padding: 6px;
height: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#menu_container .nav ul { list-style: none; overflow: auto; }
#menu_container .nav li { float: left; padding: 0.4em 0.8em; font-size: 0.9em; line-height: 1em; cursor: pointer; }
#menu_container .nav li a { text-decoration: none; text-transform: uppercase; }
#menu_container .nav li:hover a,
#menu_container .nav li.active a { color: #fff !important; }
#menu_container .nav li.contact_screen:hover a,
#menu_container .nav li.contact_screen.active a { color: white !important; }
#menu_container .nav li a { color: #000000; }
#menu_container .nav li a { transition: all 400ms; -webkit-transition: all 400ms; }
#menu_links { display: inline-block; }
#menu_button { display: none; color: white; cursor: pointer; text-align: right; padding: 0 0.8em; }
#menu_button i { font-size: 1.3em; margin-right: -0.3em; color:#bc9321;}
#menu_links li:first-child {}
I ran into this very scenario recently. I got it working by positioning the logo absolutely, then using :nth-child selectors to target the elements on either side of the logo and add margins to make room.
Here's the Fiddle
:nth-child is great, but you might want a fallback set of styles for older browsers .
Have you considered CSS3 display: flex?
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The issue I run into with this setup is that when you want to switch to smaller screens - this wouldnt work as well as your logo is still placed in the middle instead of allowing them stack block...
You could stick your logo class as an li in the middle.
<div id="menu_links" class="nav">
<ul>
<li class="home_link">Home</li>
<li class="menus_link">Menus</li>
<li class="logo">Restauraunt</li
<li class="contact_link">Contact</li>
<li class="reservations_link">Reservations</li>
</ul>
</div>
Then change h1.logo to li.logo.
Related
I want the blue of the navbar to extend across the screen, while the About, Updates, and Who am I? to stay in the middle? I want the background to remain a background so that it will change if I resize anything. I am fine with a different centering method, if that works better.
.centered {
display: flex;
justify-content: center;
}
#navbar {
background: #0099CC;
color: #FFF;
height: 51px;
padding: 0;
margin: 0;
border-radius: 0px;
}
*{
padding:0;
margin:0;
}
#navbar ul, #navbar li {
margin: 0 auto;
padding: 0;
list-style: none
}
#navbar ul {
width: 100%;
}
#navbar li {
float: left;
display: inline;
position: relative;
}
#navbar a {
display: inline-block;
display:flex;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
#navbar li a:hover {
color: #0099CC;
background: #F2F2F2;
}
#navbar label {
display: none;
line-height: 51px;
text-align: center;
position: absolute;
left: 35px
}
<div class="centered">
<nav id='navbar'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Updates</a></li>
<li><a href='#'>Who am I?</a></li>
</ul>
</nav>
</div>
You can add 100% width to #navbar to extend across the screen and change display & width properties for #navbar ul, like this
#navbar {
width: 100%;
}
#navbar ul {
display: flex;
width: fit-content;
}
I need to clarify that I have close to no understanding of pragramming so my apology if my question sounds dumb.
So the question is that I would like to make the navigation bar of my website bigger (vertically) as it looks too small right now.
Below is the code that probably should affect the change. If you need more information then I will do my best to provide that! Thanks all!
#nav-wrap {
position: fixed;
top: 0;
left: 0;
border-top: 3px solid #000B5C; /* #ActiveSectionColor; this one controls the top border old #199ad0; old nav color */
background: rgb(29,62,143); /* #MenuBarColor; Hex code: #1d3e8f */
background: rgba(29,62,143,1); /* #MenuBarColor; This line controls opacity. #1d3e8f, */
z-index: 999;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .container ul {
list-style: none;
overflow: hidden;
float: right;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-right: 17px;
text-transform: uppercase;
}
#nav-wrap .container ul span:last-child li,
#nav-wrap .container ul > li:last-child {
background: none;
}
#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Lato', sans-serif;
color: #fff;
padding: 14px 12px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 13px;
font-weight: bold;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff; /* April 2017 */
background: #000B5C; /* #ActiveSectionColor; this one controls the rest. old #199ad0; */
border: 0;
}
make css class and use these properties and call this class on your navbar tags or div tags which you are using
.sizing{
padding-top: 50px;
padding-bottom : 50px;
}
if you want sizing to vise versa then insted of top and bottom just use right and left
I've got little problems with my header that has to be symetrically perfect and I'm terrible at this so could you please tell me how to make the it positioned on the center and keep the margin between links?
How should it look like:
I'd also love to know how to make that underline on hover and the simple language switcher.
My code:
<nav id="nav">
<ul style="text-transform:uppercase">
<li>Strona główna</li>
<li>Portfolio</li>
<li><img src="logo.png"></img></li>
<li>O mnie</li>
<li>Kontakt</li>
</ul>
</nav>
CSS:
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
margin-left:30%
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
Removed a lot of margin and padding from your code.
Added position: relative;, text-align: center;, width: 100%; to #nav.
Also, Added margin:0; and padding:0; to *
Note: You didn't have img in li for some reason.
Change to this:
*{
margin:0;
padding:0;
}
#nav {
position: relative;
top: 0;
height: 3em;
line-height: 3em;
text-align: center;
width: 100%;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
For underline on hover.
Try this:
#nav ul li a:hover {
border-bottom: 3px solid #eee;
}
JSFiddle Demo
Add this to your css to make link underlined when hover.
#nav ul li a:HOVER{
text-decoration : underline;
}
Update your Nav class like below.
#nav {
position: absolute;
right: 0;
top: 0;
left:0;
margin:0px auto;
height: 3em;
line-height: 3em;
}
DEMO
You can center stuff on your webpage with the CSS property text-align:center;
As for the underline on hover? Just add an onhover event handler to it, then use document.getElementById("Makeanidforthestuffyouwantunderlined").class="Someclass";
in your javascript.
Finally, you can go to your CSS, and do this.
.Someclass{
text-decoration:underline;
}
Alternatively, some elements support the "hover" pseudo element.
p:hover{
text-decoration:underline;
}
I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with CSS ONLY.
http://jsfiddle.net/C7v9f/
I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.
html, body {
height: 100%;
color: #fff;
}
body, p {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
background: #888;
}
#header {
height: 55px;
background: #222;
position: fixed;
width: 100%;
z-index: 4;
}
#SC-wrap {
float: left;
margin-bottom: 40px;
}
/* BEGIN HEADER NAV */
#nav {
padding-left: 32%;
}
#nav li{
position: relative;
display: inline;
color: white;
}
#nav a {
display: inline-block;
padding:10px;
}
#nav ul {
position: absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align: left;
text-decoration: none;
}
#nav ul li {
display: block;
}
#nav li:hover ul {
left:0;
}
#nav li:hover a {
text-decoration: none;
background: darkgrey;
}
#nav li:hover ul a {
text-decoration: none;
background: #B8B8B8;
}
#nav li:hover ul a:hover{
text-decoration: none;
background: #CCCCCC;
}
#nav ul a{
white-space: nowrap;
display: block;
border-bottom:1px solid #ccc;
color: white;
text-decoration: none;
}
#nav a {
text-decoration:none;
color: blue;
}
#nav a:hover {
text-decoration:none;
background: #f1f1f1;
color: blue;
}
/* END HEADER NAV */
#sidebar {
background-color: green;
width: 150px;
height: 100%;
position: fixed;
line-height: 2em;
font-size: 1.2em;
z-index: 2;
text-align: center;
padding-top: 6%;
overflow-y: auto;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
background-color: grey;
}
#content {
padding-right: 250px;
width: 100%;
padding-top: 100px;
font-size: 1.2em;
line-height: 1.6em;
z-index: 1;
text-align: left;
padding-left: 200px;
}
#footer {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
background: #222;
z-index: 4;
}
The padding on the right is there, the content is just too wide. To make the padding not be included in the width of the element use box-sizing:border-box Demo
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
... Your other styles ...
}
I'm trying to center the navigation, but I haven't succeeded yet. The idea is that the navigation moves along as the user scrolls the page. It has to be responsive as well, because navigation should always be displayed. So I've come up with this:
<nav id="nav" class="container">
<ul>
<li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
<li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
<li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
</ul>
</nav>
And the CSS:
#nav
{
position: fixed;
}
#nav ul
{
list-style: none;
padding-left: 0;
text-align: center;
}
#nav li
{
display: inline-block;
}
#nav a
{
color: rgb(255,255,255);
font-family: 'Open Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.3em;
display: block;
margin-right: 80px;
height: 100px;
width: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height: 100px;
}
#nav a.avaleht
{
background: rgb(168,191,18);
}
#nav a.massaazh
{
background: rgb(255,159,0);
}
#nav a.kontakt
{
background: rgb(0,170,181);
}
#nav a:hover
{
text-decoration: none;
background: rgb(66,64,62);
}
And this is how I'd like it to work:
Thank you very much.
Just add left:0; right:0; to the fixed #nav element:
#nav {
position: fixed;
left:0; right:0;
}
Then remove the margin-right for the last li element's child anchor element:
#nav li:last-child a {
margin-right:0;
}
Example Here
#nav {
position: fixed;
left:0;
right:0;
}
and replace margin-right:80 with margin:5px 40px
#nav a{
margin: 5px 40px;
}