I'm a self-taught website developer (still learning a lot) and I'm running into some difficulty with the styling of my main menu/navigation bar. The problem is that my menu is running out the specified/fixed/auto position. I'm using Wordpress.org, it's Untitled theme. It's doing this: http://www.betweenparentheses.net
This is my code:
.main-navigation {
float: right;
font-family: 'arvo', georgia;
font-size: 24px;
padding-top: 0px !important;
text-transform: uppercase;
clear:right;
margin-top: 0px;
}
.main-navigation ul {
list-style: none;
margin: -44px;
padding-left: -5px;
float: right;
}
.main-navigation li {
display: inline-block;
position: right;
margin-left: 4px;
padding-left: 16px !important;
}
You specified the margin for the .main-navigation ul incorrectly. You gave only one value to the margin, which means, that all four sides will have this negative margin. This is why your menu is running outside the viewport.
You should specify it like this:
.main-navigation ul {
list-style: none;
margin: -44px 0 0 0;
padding-left: -5px;
float: right;
}
I'll explain this a little bit:
The four segments in the margin property represent the element's sides clockwise: top right bottom left.
You only needed to adjust the top margin to change the element's position on the screen.
I would also recommend to add a small positive right margin (22px, for example), to give the menu some spacing in the right side as well:
margin: -44px 22px 0 0;
Update:
In order to get your menu to the desired position, replace the CSS for .main-navigation with this:
.main-navigation {
float: none; /*Changed this*/
font-family: 'arvo', georgia;
font-size: 24px;
padding-top: 0px !important;
text-transform: uppercase;
clear: right;
margin-top: 0px;
max-width: 1000px; /*Added this*/
margin: 0 auto; /*and this*/
}
Also remove the left and right margin from your .main-navigation ul rule:
Replace this
margin: -44px 18px 0 0;
with this
margin: -44px 0 0 0;
Related
I've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
after i had fixed my white screen of death last week.. when i open my website to continue developing today.. i noticed that the footer banner instead of covering only about 35px at the bottom of the screen... with a white space between the red header and the blue footer.... but now what i see is a massive blue footer without any stitch of white space in between the header and footer!..
this is the link to my website: http://hoho25974.staging-cloud.partnerconsole.net/
style.css coding.
'* =23. Footer
-------------------------------------------------------------- */
.site-footer {
background-color: #fff;
color: #afafaf;
font-size: 14px;
text-align: center;
vertical-align: middle;
}
.site-footer a {
color: #afafaf;
}
.site-info {
padding: 10px 0;
margin-top: 10px;
border-top: #eee solid 1px;
}
#colophon ul {
list-style-type: none;
padding-left: 0;
list-style-position: inside;
}
#sidebar-footer {
text-align: left;
word-spacing: -0.29em;
}
/* === Footer Menu === */
.footer-menu {
display: inline-block;
float: left;
margin: 0 0 10px;
}
.footer-menu ul {
float: left;
list-style: outside none none;
margin: 0;
padding: 0;
}
.footer-menu ul li{
display:inline-block;
padding-right: 10px;
}'
footer-banner.css
#colophon {
padding: 40px 0;
margin-top: 0px;
border-top: none;
}
i would appreciate any pointers in order to reset the footer banner into its usual height.. i am not sure if i could use the max-height function or? and i am using the tesseract theme.
thanks very much in advance.
I have a Bootstrap navbar with few links in it, and verical separators between them. The problem is that when the screen width is between ~1100px - ~770px the separators are not having the same height. here is their css code:
.navbar-default li + li {
background:url('../images/buffer1.png') no-repeat top right;
background-size: auto 90%;
}
I guess it's because of the use of percentage, but I have to use it due to the responsive design (when the screen get smaller the li's width is changing and the separator have to fit to their height...
Here is live example:
http://www.bootply.com/KuD2TuYe0H
I'm looking for a solution (CSS only is better) that make all the separator with the same height.
One solution is to fart around with bottom margin/padding. Works in IE7+.
.navbar .nav {
overflow: hidden;
margin: 0;
width: 100%;
direction: rtl;
}
.navbar .nav > li {
float: right;
display: inline-block;
width: auto;
text-align: center;
padding-bottom: 10000px;
margin-bottom: -10000px;
direction: rtl;
width: calc(100% / 7.0);
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 14px;
font-weight: bold;
/* border-left: 1px solid #d4d4d4; */
}
.nav > li {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.navbar-default .navbar-nav>li>a {
color: #777;
background-color: #f8f8f8;
}
I'm trying to edit the border-top of each element in the navigation bar in weebly so that I can style each of them a different color. However, when I jump into the HTML file, I only see "{menu}" within the navigation div. I want to be able to ID out each individual element so that I can style it. Thanks!
Got it! I used :nth-child(). Awesome!
Could you provide an example of how you were able to edit individual navigation items in Weebly using nth-child()?
Here is the code from my Weebly site, but I can't get it to work. I'm just trying to round the top-left corner on the first menu item of the navigation bar. Right now, when I click on a different item, it shows it with a rounded corner on the top left. I always want the top left corner to remain rounded. I'm a newbie...
#topnav {
clear: both;
margin: 70px 0 0 150px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
}
#topnav ul {
list-style: none;
background: #404040;
width: 504px;
float: left;
}
#topnav li {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#topnav a {
float: left;
display: block;
color: #fff;
background: #404040;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 16px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
}
#topnav li#active a {
color: #fff;
background: #8fa944;
}
#topnav a:hover {
color: #fff;
background: #8fa944;
}
here is my css code for a horizontal menu, it's cross browser and it works great, well it has 1 glitch. :)
The #menu which wraps everything has to have width of 100%, but when I put a border on it, the border adds to the width making it larger and screws up my layout.
What I do is use jquery to substract the 2 pixel border. Is there a way to do this with css?
here is the menu's css:
#menu {
width: 100%;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-right: solid 1px #555;
border-left: solid 1px #555;
border-bottom: solid 1px #555;
}
#menu ul {
margin: 0 0 0 0.5em;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
width: 20%;
line-height: 1.5em;
margin-right: 1em;
margin-bottom: 0.5em;
background: url(images/headline.jpg) top repeat-x;
border: solid 1px #555;
text-align: center;
}
#menu a {
display: block;
width: 100%;
font-size: 70%;
text-decoration: none;
}
#menu a:hover {
background: #000 none;
}
Some notes:
The menu has to be wrapped by a div that is used for styling background color, left margin/padding, etc. I've found no way to style the UL itself, because I can't clear the float inside it. Thus the height of the OL always equals zero.
Ty very much!
Use outline instead of border. It creates "borders" in the same way, only it places them on the inside of the frame, rather than the outside as border does.
If you can ignore IE7 and below, you can use box-sizing.