The original file has a header which is white with a dark type menu in the upper righthand corner:https://www.posweyb.net/generic.html I swapped the text and background colors in a new id named “myheader”.
When I look at the file locally it looks like this: https://www.posweyb.net/Capture.gif
When I upload the file it looks like thishttps://www.posweyb.net/genericcolorswap.html
So two questions. Why would swapping a color change the location of the menu?
And why does the local file reflect the color change but not when it is uploaded on the server?
You changed the name of the header id from #header to #myheader but you did not change all the instances of #header in your css file. All your items in the header are styled via descendant selectors based on the parent having an id of #header.
e.g.
/* Header */
#header {
background-color: #fff;
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
color: #484848;
cursor: default;
font-size: 1.25em;
height: 4.5em;
left: 0;
line-height: 4.4em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
z-index: 10001;
}
#header h1 {
color: #484848;
font-weight: 400;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
border-radius: 4px;
display: inline-block;
margin-left: 2.5em;
padding-left: 0;
}
#header nav ul li a {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
color: #666;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #484848;
}
#header nav ul li:first-child {
margin-left: 0;
}
#header nav ul li .button {
border-color: rgba(144, 144, 144, 0.25);
box-shadow: none;
height: 3em;
line-height: 2.9em;
margin-bottom: 0;
padding: 0 1.5em;
position: relative;
top: -0.075em;
vertical-align: middle;
}
#header .container {
position: relative;
}
#header .container h1 {
left: 0;
}
#header .container nav {
right: 0;
}
#header.alt {
background-color: transparent;
border: 0;
box-shadow: none;
height: 3.25em;
line-height: 3.25em;
position: absolute;
}
#header.alt h1 {
color: #ffffff;
left: 2.5em;
top: 2em;
}
#header.alt h1 a {
color: #FFF;
}
#header.alt nav {
right: 2em;
top: 2em;
}
#header.alt nav a {
color: #ddd;
}
#header.alt nav a:active, #header.alt nav a:hover {
color: #FFF;
}
#header.alt .button {
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff !important;
}
@media screen and (max-width: 980px) {
#header {
display: none;
}
}
/* Menu */
Your nav for example is styled by this rule:
#header nav { ...
You would need to change all instances of #header in your css file to say #myheader instead.
#myheader nav {
That’s one reason that its best avoid descendant selectors in a large context like that. If instead you had applied a class to the nav in the first place and used that class then the change to the header id would not have had any efect to the nested elements.
e.g.
.nav{.. styles here}
It’s also best to avoid ids as hooks for styling because then it makes it hard to over-ride them as ids carry more weigh than classes. Generally I just use classes to style everything and not have the specificity wars than would otherwise ensue
That little bit about using classes was very helpful. One wonders when beginning to learn something new what are best practices verses what can be done. Once I make the ids into classes if the second problem persists I will be back!
