Nav help (CSS)

In your custom CSS, it looks like you are missing the ending right brace }, so please add that in first. Then, change the selector from .site-header to #masthead. That will enable that rule to override the properties in existing rules.

Finally, to make the menu semi-transparent, add this property to the end (before the ending right brace):

background-color: rgba(56, 47, 48, 0.5);

This uses the same color as the existing header, but the last value, 0.5, sets the “opacity” to 0.5, or 50%. You can use any value from 0 (completely transparent) to 1.0 (completely opaque, or non-transparent).

You might want to think about taking out the width property from that rule. Otherwise you’ll get a lot of white space off to the right on a cell phone. Or add a media query to make the width 100% on a cell phone width.

Not sure what you mean by “thinner.” Are you referring to the height or the width?

Thank you very much. I managed to work out a css code myself to add into custom css.

I am stuck on one final part. On the bottom of my home page in the footer on the right.

It says theme by Tyler Moore. What css code can I change that with.

I would like to add my own copyright into there. or even Blank.

Im guessing the code would start with

.site-footer?

Thank you.

You don’t need .site-footer because the element has it’s own unique ID.

#designer, #designer a {
  color: #000;
}
#designer:before {
  content: 'Copyright 2015';
  color: white;
}

The first rule will hide the “Theme by Tyler Moore” by setting the text color to match the footer color. The second rule will add your own copyright info.

If you would rather just hide the line instead, use:

#designer {
   display: none;
}

Thank you worked perfectly.

Ok, so everything has removed. But if I move the mouse just under the copyright. It says Tyler Moore that highlights up.

Are you able to tell me a code to remove that?, please.

Thank you. What a great site this is CrouchingBruin, Truly helpfull ??

OK, sorry, let’s split that first rule like this:

#designer {
  color: #000;
}

#designer a {
   display: none;
}