Menu indent second line on smaller browsers « Support Forum | Kriesi.at

Support Forum » Angular

Menu indent second line on smaller browsers

6 posts from 2 voices

Started 1 year ago by marjons
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

marjons
Member

I have this problem that I can't seem to figure out myself... I created menu buttons instead of just the words and it works fine. But... when I decrease the size of the browser the alignment of the second menu line gets weird, it's like it's indented by something.

Testing helped my discover that it's only on the flexible dynamic template pages, the single portfolio item pages show the menu correctly.

The beta version of the website can be found on: http://www.marjonswebsites.nl/vink

A page were it works like I wanted to: http://www.marjonswebsites.nl/vink/portfolio-item/het-talenten-theater/

What can I do?

Thanks in advance for your answer!

PS: I also wonder... when I validate the page trough W3c Css validator I get a lot of errors, mainly because of the use of CSS3 I guess, but is that no problem?

Posted 1 year ago #
Ismael
Moderator
Hello,

You can emphasize a minimum width for the header to prevent it from decreasing size on lower resolutions.
```
.container {
minimum-width: 1150px;
}
```
Regards,
Ismael
Posted 1 year ago #
marjons
Member

Hello Ismael, thanks for your quick reply. I've tried this but unfortunately it's not the solution I'm looking for.

The menu falls out of the background, the rest of the page is not good aligned anymore and the indent still sets in when I decrease the browsersize.

Any other options? (I left your suggestion online so you can see what I mean)
Thanks in advance!

Posted 1 year ago #
marjons
Member

Further testing shows that this only happens on the "Home" and "Diensten" page, see:
Home: http://www.marjonswebsites.nl/vink/
Diensten: http://www.marjonswebsites.nl/vink/diensten/

The other pages work fine, so I think it has something to do with the dynamic template, I just can't figure out what...

I can show you how it looks right now: http://www.marjonswebsites.nl/vink/files/menu_example.jpg
and how it should look: http://www.marjonswebsites.nl/vink/files/menu_example2.jpg

See what I mean with the indent?

If anyone know what could be the solution I would very much appreciate it, thank you!

Posted 1 year ago #
marjons
Member

So... I figured it out!

After a long puzzle I found out that the menu items where displayed as Block elements, after I changed it to Inline it worked fine. I did had to change some of the other elements to make it look like I wanted again, but it works fine now.

I'm very happy now, hopefully if someone else has this problem they can do something with this solution.

Posted 1 year ago #
Ismael
Moderator

Hi,

Glad that you have found the solution. :)

Cheers,
Ismael

Posted 1 year ago #