Top Header Bar Behaviour

MomaZunk

I have my top navigation and logo at the top of my page.

The content of my header is

Logo Image .... Menu .... social buttons

When I shrink the viewing area, the menu and logo act funky.

Case 1: If I have the logo Image to the left of the text, the logo will overlap the menu as the window is shrunk.

Case 2:If I have the logo image to the right of the text, the logo will push off of the left side of the page as the page is shrunk.

www.deezunkerphotography.com/

Note: I do not have any text in the title block.

What can I do to fix this?

jwashburn

MomaZunk wrote: »

I have my top navigation and logo at the top of my page.

The content of my header is

Logo Image .... Menu .... social buttons

When I shrink the viewing area, the menu and logo act funky.

Case 1: If I have the logo Image to the left of the text, the logo will overlap the menu as the window is shrunk.

Case 2:If I have the logo image to the right of the text, the logo will push off of the left side of the page as the page is shrunk.

www.deezunkerphotography.com/

Note: I do not have any text in the title block.

What can I do to fix this?

Adjust the size of your logo box to be X pixels wide instead of a percentage. That should help. Then play around with the size as needed

Mike J

Did you ever get this fixed? I'm having similar problems where the navigation will overlap the logo when the width of the browser is decreased.

MomaZunk

Yes I did fix it, with a workaround. Just having the logo would never work. I added the byline below the logo, and that seemed to have a container that prevented the overlap of the menu.
The byline part is Sports, Events, Architecture - Houston, TX

Mike J

MomaZunk wrote: »

Yes I did fix it, with a workaround. Just having the logo would never work. I added the byline below the logo, and that seemed to have a container that prevented the overlap of the menu.
The byline part is Sports, Events, Architecture - Houston, TX

Thanks. I fixed my issue by not using a logo block. I just used a picture block instead. This seems to scale better than the logo block. I made the picture clickable and linked it to my homepage.