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
Related
hello guys I'm new to programming and I can't seem to find any related search about what I am trying to do.
Here's an image
can someone please help me.
My code is like this in my li and ul
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
Essentially you are only needing to add a border, and then a border-radius in CSS to curve the edges.
Here's a basic example, based on what you have:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:right; /* Float the main list element instead */
}
li {
display:inline-block; /* Don't float your list items, float the list itself */
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px;
text-decoration: none;
margin:0 10px; */ I've changed the padding and margin of the list items to help them display more like the image*/
}
/* You need a border and border-radius to curve it */
li:first-child {
border:2px solid #fff;
border-radius:15px;
}
https://jsfiddle.net/leecollingsco/sj2utx7c/
If you want circle in all li elements on selection than use:
ul li {
border:2px solid #fff;
border-radius:15px;
}
I'm trying to create a site navigation bar that uses sub-menus.
Using whatever I can gather from the internet I've done my best and have got one working with one small issue.
When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to.
Can anyone get this to work?
.header nav.site_nav {
float: right;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.header ul a {
display: block;
font-weight: bold;
color: #2C395D;
font-size: 14px;
text-decoration: none;
padding: 8px 8px 8px 8px;
}
.header ul a:hover {
color: white;
}
.header ul li {
float: left;
position: relative;
margin: 0 2px 0 2px;
}
.header ul li:hover {
background: #2C395D;
}
.header ul ul {
display: none;
position: absolute;
text-align: right;
top: 100%;
right: 0;
}
.header ul ul li {
float: none;
width: 150px;
background: #BFC8E1;
margin: 0;
}
.header ul li:hover > ul {
display: block;
}
jsfiddle code
I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.
Updated Fiddle
Add this class to your top level menu items in html:
<a class="topLevel" href="#">Courses ▾</a>
Add this to your CSS:
.header ul li:hover a.topLevel {
color: white;
}
I recently built my first website (with much trial and error) and was quite pleased until I noticed that when you scroll down the page a little it creates a gap in the navigation so you can't click on the dropdowns. I'm going crazy trying to fix it. Can anyone please help? The site is at: http://lamplighters.org/education/smw.html
it appears to be an position issue that is set witht the element on the css. It would help to see your html and css code.
I can tell you that it has to do with the fact you used position: fixed. You have a series of other problems with your CSS as well.
I inspeceted the page and found a lot of things that didn't come together well for the navigation. Good housekeeping is not in order.
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}
#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
You may want to wipe your nav css clean and start from scratch.
I pulled a css file and put it below. hope this helps. Good luck with your sytle sheets in the future.
#menu{
width: 960px;
margin: 50px 0 0 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 60px;
text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
color: #FFFFFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0 35px;
padding: 0 15px;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
/*add a background position*/
background-position: left top;
}
#menu ul li:first-child a{
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menu ul li:first-child a:hover:after{
/*add color scheme*/
}
#menu ul li:last-child a{
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
i try to make my blog responsive but my navigator menu is behind the title, i want to make it in front of my title. you can look the print screen here
print-screen
and here's the nav code on media query;
.nav {
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.nav ul {
/*width: 599px;*/
padding: 5px 0;
position: absolute;
/*top: -13px;
left: -95px;*/
border: solid 1px #2FB8C8;
background: #2FB8C8 url(../images/icon-menu.png) no-repeat 10px 11px;
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
opacity:0.8;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width:599px;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
opacity:1;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
thanks in advance for your help
You could set the z-index explicitly to bring those elements forward.
.nav {
z-index:2
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.Title{
/*or what ever you gave it*/
z-index:1;
}
Check the following links for your guide. You also need to use jQuery.
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
http://webdesignerwall.com/demo/responsive-menu/
http://www.hongkiat.com/blog/responsive-web-nav/
I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.
New user, can't upload image
If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.
/* Dropdown Menu */
#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #3636FE;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }
Fixed. (at least for Chrome+Firefox+IE9)
http://jsfiddle.net/QZWj3/4/
You had to add width: 100% to #nav li:hover ul and to #nav li:hover li