Archived topic
Adjust padding separately between site logo and navigation
11 replies · Started by Michelle on August 9, 2022
I am using Navigation as Header with mobile menu and sticky menu on.
My site logo looks great on sticky scroll, but is higher than the navigation on the regular Header. (I need to bring the nav up or bring the site header down.)
What I like (shows on sticky header) - https://postimg.cc/TKXdWxkp
What needs fixing (shows before sticky header kicks in) - https://postimg.cc/fkGZ6ZQB
Here's the CSS I'm using:
.main-navigation .main-nav ul li.login-logout a {
font-size:11px;
padding: 8px;
background-color: #b80000;
color: #ffffff;
border-radius: 5px;
line-height: 8px;
margin: 25px 0;
}
.login-logout {
position: -webkit-sticky;
position: sticky;
top: 0;
line-height: 0px;
left: 20px
}}
How do I fix this?
Hi Michelle,
I noticed that this topic has been marked as resolved. To clarify, would you still need assistance with regards to this?
Yes, I re-wrote the request in a new thread, complete with screenshots. What I need most is a way to make the nav button line up with the site logo. Thank you for asking.
:)
Oops. Yes, I still need help on this. I am replying on my phone
Can you provide the link to the site in question?
Sure. See below
Try adding this:
nav .inside-navigation .site-logo {
margin-bottom: 0;
}It didn't change. (I cleared my cache)...
I think you have syntax error somewhere in your Additional CSS. Check for excess }. It’s causing the new CSS not to work.
Ok. Thank you, I will look at it.
That was a fantastic thing for me to learn. I used an online syntax validator (didn't know they were a thing) and found multiple errors. I fixed the errors, line by line, and now I finally have a site that shows my CSS changes. I kept thinking my code was wrong--and it was--but not for the reasons I thought. It was SYNTAX errors. What a relief. Oh my gosh. Here's a virtual hug. [Hug].
You’re welcome Michelle! Glad for you!
