Hey there, I'm currently facing an issue with aligning my website's logo vertically in the middle with my navigation link list. I have attempted to use "vertical-align: middle" on my div columns but it doesn't seem to be working. Right now, both my logo and navigation links appear a bit out of place and floating around. Any suggestions or advice on how to fix this would be greatly appreciated.
HTML:
<div class="sixteen columns clearfix">
<div class="five columns">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if settings.use_logo %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" />
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
<div class="eleven columns">
<div id="mobile_nav"></div>
<div id="nav">
<ul id="menu">
{% for link in linklists[settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
{% else %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}class="active"{% endif %}{% endfor %}>{{ link.title }}
<span class="arrow">∨</span></a>
<ul>
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% else %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }} <span class="arrow"> ></span></a>
<ul>
{% for link in linklists[link.handle].links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
Column CSS:
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
}
This is the current appearance:
Looking to center it like this: