Handwritten menu tiles (as pictures) around a central logo

Yaro

Hello!
I was redirected to this forum by the smugmug support team, so I shall share my question with you and hopefuly we can work this one out. My website is www.bluesinberlin.com. Right now I have made a central handwritten logo because I want to keep a personal touch to this whole thing and what I wish to achieve right now are two menu tiles to the left and to the right of it (later maybe two menus to the left and two to the right). These menu tiles should obviously work as pictures and scroll down together with the logo.

Tom from the support team told me that in order to achieve this one needs to code a custom menu header. So are any smugmug-support-heroes willing to help me in my cause? My own knowledge is limited to the delivered content management system, since I do not know how to code css or html.

Hikin' Mike

Do you have a working example? Right now I really don't understand.

Yaro

Hello Mike! It's actually really simple: I have visualized it here: https://ibb.co/cC1CB9m

That would be all that I need right now.

Hikin' Mike

Why can't you just add two menu blocks either side of your logo?

You do know just using images/pictures as a navigation is bad for SEO, right?

Yaro

I really wish to keep a personal touch to it, that is why I wish to use handwriting. I think that I do understand the disadvantages of it for the SEO, but I really wish to explore and try this possibility because of my aesthetical reasons, desires, etcetera. The regular menu blocks would allow only fonts, but not pictures (the logo does, however).

Hikin' Mike

You need to provide an outline as to what your menu(s) will look like. Something like:

Top Menu


  Item 1

Yaro

Thanks for staying with me, Mike!

Well, let's see. In the next year there will be only two new menus on my website. One will lead to a blog section (that would be the left menu number one) and the other one to the about page (that would be the right menu number two). Translated to your scheme it would look something like this?

Top Menu
> Item 1 Blog (www.bluesinberlin.com/blog)
> Item 2 About (www.bluesinberlin.com/about)

Sub-menus are not planned. Forgive me should my scheme not make much sense, for I am completely new to this realm and language :) Eventually I'll learn this too.

Hikin' Mike

In that case this will be simple. Since your not really creating a navigation structure, you can just use a link, with a picture. You'll need two HTML blocks to the left and right of you Logo Block.

For your Blog:
< a href="/blog"><img src="your-picture-link-here" /></a>

For your About page:
< a href="/about"><img src="your-picture-link-here" /></a>

You'll just need to replace the your-picture-link-here part with the URL of the picture.

Yaro

Wow, that looks manageable. Thank you! I will try it out this sunday and report how it goes!

Hikin' Mike

@Yaro said:
Wow, that looks manageable. Thank you! I will try it out this sunday and report how it goes!

Just thinking out loud, but you can probably just use two Photo Blocks instead. I'm more familiar with HTML blocks, but Photo blocks will probably work as well. Just don't add the title.

Yaro

Hello Mike! It works! Many many thanks to you!

I tried the solution with the picture and not the HTML block and it worked just fine: there is even a "go to URL" on click field. Now I can work on the pages and create the link-tiles for them. Probably I will have to play a lot with the sizes and design of the tiles to make it look right (right now there was a lot of empty space between the logo and the tile), but that should be manageable.

Hikin' Mike

Just looking at your site, I'm not seeing your navigation or the logo. Make sure those images are not private.

Yaro

I got it now Yes!

Can you help me translate it to proper english now? Just joking! Thank you, Mike!

Ugh, I have other problems now - the page is not really working on a smartphone now. I wanted to have fixed three-picture-lines and went for a fixed 1368px layout, because I could not find another solution for it and that broke the design on a little screen obviously. I have to find a proper way for doing it.

Hikin' Mike

@Yaro said:
Can you help me translate it to proper english now? Just joking! Thank you, Mike!

Is this German? My daughter has been teaching herself German for several years now.

@Yaro said:
Ugh, I have other problems now - the page is not really working on a smartphone now. I wanted to have fixed three-picture-lines and went for a fixed 1368px layout, because I could not find another solution for it and that broke the design on a little screen obviously. I have to find a proper way for doing it.

I'm not sure if you're going to be able to have a three column display on all devices like you have now. I certainly wouldn't set it to a fixed width, especially that wide (1368px), but that's me.

Yaro

I know, this fixed 1368px thing is only a temporary solution for my purposes. The pictures are not sequenced yet in a proper manner, the three-pics layout helps me a lot for getting the needed order between them. After thats done I will search for a compromise.

And yes - it is german! But there is no real need for translating anything yet, because the text will be changed ten to twenty times from now on, I bet.

So thank you for staying with me and helping me getting a clue how to do these menu tiles, that helped a lot and now I can concentrate on other more important content related things