Menu icon Foundation
Top-bar with logo

Hi,

I wondered if you could help me out. I've got a simple top-bar on my webapge.

I was just thinking is it possible to add a logo in the top left corner instead of using the title area text

Any help would be great

topbar

Hi,

I wondered if you could help me out. I've got a simple top-bar on my webapge.

I was just thinking is it possible to add a logo in the top left corner instead of using the title area text

Any help would be great

James Gehring over 5 years ago

Just change

<li class="name">
      <h1><a href="#">My Site</a></h1>
</li>

with

<li class="name"> 
       <a href="#"><img src="images/yourimage.png"/></a> 
</li>

depending on the size of the image you use you will have to adjust some CSS to get it to fit properly.

Rafi Benkual over 5 years ago

You can also build the logo outside the topbar if you want. The code contained in this forum answer is an example of how to:
http://foundation.zurb.com/forum/posts/1231-content-shifted

Christian Solorzano over 5 years ago

How can you modify the logo so it stays centered when viewing the page on a mobile device? It seems that the title floats to the left when in tablet or mobile.

Rafi Benkual over 4 years ago