Hey Tuanphan thanks for the response.
Website: https://kale-seahorse-tty9.squarespace.com/
I ended up doing some rearranging on my header.
- I removed the social icons and will put them in the footer
- moved the header button a little lower down the page/out of the header
- moved the navigation list to the bottom of the media screen as best as I could in a row and added a hover effect.
Here is the CSS code I am using. I have a couple of questions I could use some help with below code.
______________________________________________________________
// Custom Home Page Navigation //
@media screen and (min-width:768px) {
body.homepage .header-nav-list {
width: 100%;
padding: 25px;
background: rgba(247, 248, 250,.1);
margin: 0px;
position: absolute;
left: -25px;
right: 0px;
top: 460px;
z-index: 999;
display: row;
}
/* Nav item hover color - underline */
.header-nav-item a:hover {
color: rgba(247, 248, 250,1) !important;}
}
_____________________________________________________________
Two Navigation customizations I would like some help with please:
1. How do I to tell the navigation list row to be at the bottom of the video screen no matter what size screen someone is using excluding mobile? Right now if I did nothing to the code but added "Bottom: 0px;" the nav list moves up under my tagline. I assume this all has to do with cascade, specificity, and inheritance of the template I am using. I have hardly scraped the surface of understanding these concepts. I'd like to have nav list at the bottom of the video screen and not be able to move when scrolling on screen vertically.
2. How do I code the css to make the nav list background/padding to be rounded? Currently, is a rectangle shaped.
Last side question:
In the original code you gave me above you had the min-width: (min-width:992px). I was wondering if I have my code set to (min-width:768px) how that might be a potential issue for anything or what your thoughts are on me using 768px.
Thank you very much for your help. I did PM you my login info if you need it.