After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example:
Here is the HTML I used:
<div class="topnav">
<a class="accommodations" href="#accommodations">Accommodations</a>
<a class="activities" href="#activities"> Activities </a>
</div>
And here is the CSS for mobile devices:
.topnav {
padding-top: 17px;
border-bottom: solid 3px #808080;
text-align: center;
display: flex;
border-top: none;
padding-bottom: 10px;
}
.topnav a {
width: 50%;
padding-top: 17px;
border-top: none;
}
.topnav a:hover {
padding-top: 17px;
border-top: none;
border-bottom: solid 3px #0065fc;
padding-bottom: 10px;
}
However, when I add the hover effect, the blue bar seems to overlap the grey one instead of replacing it. The padding on top is necessary on desktop dimensions to create space between the words and the bar, but without it, the words shift when hovered over.
I've tried adjusting padding, adding borders individually, and playing with margins, but nothing has worked so far. Adding individual borders did make the hover work as intended, but there was still an odd gap on the right after "Activities."
Just to give you some context, I only have about a month's worth of coding experience, mainly self-taught through books and online resources. Any help would be greatly appreciated!
--update-- Removing the border from .topnav and applying it individually did solve the hover issue, but the border doesn't extend to cover the full page, leaving a weird gap on the right side after "Activities."
---update#2-- Thank you all for your incredible input! By combining everyone's suggestions, the hover effect now works flawlessly with no errors or issues!