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;
}
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I would like some help with customising the archive widget. I've tried the search engines looking for any tutorials but to no avail.
On my tester blog I have installed the default dropdown archive widget. I absolutely dislike the appearance and I'm attempting to alter various elements of it, such as the font, letter-spacing, colours, borders etc however I'm getting nowhere.
There are countless tutorials on how to customise the hierarchy and flat archive widget but nothing for the dropdown menu option. I was told previously that the same coding could be applied to either of the archive widget options but I've found this doesn't work.
The code I'm using to customise the widget is stated below. I've simply added this coding between the tags:
#BlogArchive1 ul li {
text-transform: uppercase;
text-align: center;
font-size: 16px;
letter-spacing: 0.08em;
font-weight: normal !important;
color: #171717;
border: 0;
width: 90%;
outline: none;
text-align: center;
background-color: #fffffff;
}
#BlogArchive1 a {
color: #171717 !important;
font-weight: normal !important;
}
The appearance I'm trying to create is very simple with no border and a clear, white background.
It is very simple, really. You just need to use the below code in order to customize further:
#BlogArchive1 ul {
margin: 0;
padding: 0;
list-style: none;
}
#BlogArchive1 ul li {
float: left;
}
#BlogArchive1 ul li a {
text-transform: uppercase;
text-align: center;
font-size: 16px;
letter-spacing: 0.08em;
font-weight: normal !important;
color: #171717;
border: 0;
width: 90%;
outline: none;
display: block;
padding: 8px 15px;
text-align: center;
text-decoration: none;
background-color: #fffffff;
}
#BlogArchive1 ul li a {
color: #171717
}
#BlogArchive1 ul li a:focus {
color: #333;
}
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;
I've added a logo to the left side of my horizontal navigational bar and I'm having a few different problems. And first of all here is a screenshot: http://i.imgur.com/TUafzKs.png
Problems:
-I want to line up all of the text with the BOTTOM of the logo. Right now all of the text is automatically lining up with to the top.
-On hover of the links, I want the background color change to white to extend to the full height of the bar, but it's only doing a portion of it. Here is a screenshot: http://i.imgur.com/ljkEdol.png
-As you can see in the first screenshot, the bar does not extend to the ends of the page (sides and top). There is a small amount of space in between. I want there to be no white space; just the pink extending to the edges.
HTML for the bar:
<ul id="nav">
<li><img id="logo" src="images/logo2.png">
<li>Work</li>
<li>About</li>
<li>Thoughts</li>
<li>Contact</li>
</ul>
CSS:
#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}
#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}
#nav li {
float: left;
font-family: whitney light, sans-serif;
}
#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
#nav li a:hover {
color: black;
background-color: white;
}
#logo {
width:200px;
}
#nav li a {
list-style: none;
display: inline-block;
padding: 8px 15px;
margin-top:174px; // you may need to adjust to get lined up perfectly
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
Right, so, I've been self-editing a rather complicated site and have been stuck on this last part involving the menu. It has a float:left command (the navbar displays alined to the left of the screen) and I've been trying to get it to text-align:center (appear centered within the screen) with a wrapper but have been unsuccessful.
Below is the coding:
#nav a {
display: block;
padding: 5px;
color: #aaa;
text-decoration: none;
outline: none;
font-weight: normal;
font-family: "Droid Serif", Georgia ,serif;
}
#nav > .current-menu-item > a,
#nav > li a:hover { color: #4C4C4C }
.plus { color: #aaa }
#nav ul {
position: center;
display: none;
}
#nav li {
float: left;
position: relative;
list-style-type: none;
padding-bottom: 5px;
}
#nav li a {
letter-spacing: 3px;
font-size: 14px;
text-transform: uppercase;
padding: 8px 15px;
I'm a programming noob and pretty much survive on combination of trial and error and the "inspect element" command in google chrome. Please be gentle and rather explanatory :)
cheers,
Jess
If you want to center the ul in the nav, just add width to ul and margin: 0 auto;
If you do not want to add a width check out How do I center align horizontal <UL> menu?
instead of float give display:inline-block to your LI . Write like this:
#nav li {
display:inline-block;
*display:inline;/* For IE*/
*zoom:1;
position: relative;
list-style-type: none;
padding-bottom: 5px;
}