I am currently in the process of making style adjustments to a website at
One specific change I've made is adding a top bar image. However, I've encountered an issue where the top bar graphic overlaps the navigation when the page is resized too wide. My goal is to have the image push the navigation bar down instead.
The HTML structure is as follows:
<div class="navigation-wrapper">
<div class="NEON-header">
<img src="/images/banners/header_whole.png" alt="NEON" style="width:100%;">
</div>
<div class="site-name">
<a href="{{ site.url }}">{{ site.title }}</a>
</div><!-- /.site-name -->
<div class="top-navigation">
<nav role="navigation" id="site-nav" class="nav">
<ul>
{% for link in site.links %}
<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</nav>
</div><!-- /.top-navigation -->
</div><!-- /.navigation-wrapper -->
The current issue lies in the fact that the site name and top-navigation divs are concealed by the NEON-header div when the page is widened. I've attempted using the "after" element in my CSS based on some code I found on Stack Overflow, but it doesn't seem to be effective either.
CSS Code:
.NEON-header {
background-color: #1ea0c1;
height: 0;
margin: 0 0 10em;
padding: 0;
}
/* The following code was an attempt to clear the div but didn't work */
.NEON-header:before, .NEON-header:after {
display: table;
line-height: 0;
content: ""
}
.NEON-header:after {
clear: both;
}
.navigation-wrapper::before, .navigation-wrapper::after {
content: "";
display: table;
line-height: 0;
}
.navigation-wrapper::after {
clear:both;
}
.site-name {
display: inline;
float: left;
font-size: 1.2rem;
margin-left: 4.16667%;
margin-right: 4.16667%;
padding: 1em 0 0;
width: 16.6667%;
}
.top-navigation {
display: inline;
float: left;
margin-left: 0;
margin-right: 0;
padding: 1em 0 0;
width: 75%;
}
If you have any suggestions or ideas on what else I could try to ensure the divs stack above and below each other correctly without the overlapping issue, I would greatly appreciate your input. Thank you, Leah