[Dr. Sibylle]

Hallo,

We use 8 buttons in the primary menu, plus the magnifying glass for the search engine. On a wide computer screen the display of the menu is fine. If we reduce the width of the browser frame to simulate a smaller screen (or we use a computer with a smaller screen) the last button and the magnifying glass are placed below the other part of the primary menu. Each in an “own row”, so the primary menu triples actually in height. The original layout is lost.

If we continue with “narrowing” the browser frame, the menu lay-out jumps to the lay-out where there is only a menu icon (3 horizontal bars) in the left and right top corner of the screen. This is the correct lay-out for smart phones etc.

I can reduce the effect a little by reducing the menu with one knob, so there is less text in de primary menu bar. But actually we need the space for the additional knob and sufficient text-space for the other knobs.

How can this be solved?

Tanks

[mosign]

@bert: can you please post the site url, so its easier to understand and reproduce?

[Dr. Sibylle]

Here you are 😉

http://www.sibylletobler.com/BiV_2/

[mosign]

hm, i can see the problem, but its really too much, there are some rules in webdesign which dont fit here 🙂 like: the menu should have only 5 or 7 entries, and all of them should be in the same way like nouns or verbs, have the same length and the same amount of words, so they are all “equal” in a way, all of them are same and same important? so maybe you can shorten the text of the menu entries for the longer pages, like “impulse” instead of “impulse zur veränderung” or “person” instead of “sibylle tobler”? (im german native) you could also use a house-icon instead of “home” and you could make the size of the font in the menu smaller or use a more narrow font?
greetings from vienna, mo

[Dr. Sibylle]

First of all thank you for the prompt sunday afternoon service!

To come back to the problem. Yes one can argue that some styling and/or web design rules are broken. And you gave practical ideas of circumventing the problem. Very much appreciated!

But I still see it as a technical problem in the theme. As far as I know there are no technical specifications regarding the text in the menu. And although the “button texts” are long, there is still some “slack” in the bar.

I don’t know weather you belong to the “Catch Staff”, but I would be interested in a technical solution as well.

Once again, thanks a lot and kind regards from The Hague (NL)

[mosign]

im just working on a page with this theme myself and trying to fix the last problems, to go online asap (http://www.fraeulein-mona.at/mona), im no stuff and i dont see the technical problem, when there is too much text in the menu, but i understand the troubles you have with the mobile menu 🙂 good luck!

[Sakin]

@Bert: Yes thanks @mosign. It’s really hard to make perfect fit for menu items. Longer the menu items, it becomes difficult to manage it. Looking at your site, you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

@media screen and (max-width: 1280px) {
    .catchresponsive-nav-menu a { padding: 0 15px; }
}
@media screen and (max-width: 1152px) {
    .catchresponsive-nav-menu a { padding: 0 12px; }
}
@media screen and (max-width: 1100px) {
    .catchresponsive-nav-menu a { font-size: 14px; }
}

Yes, in mobile version you will see 3 horizontal bars. That’s standard.

[Dr. Sibylle]

@ Sakin, thanks for the excellent service, this will do the tric! What is very nice is the slightly reduced font size in the 1100pix mode.

In general, the theme is beautiful and flexible. And so far it is working flawless!

@ mosign, I hope your site is soon on line in the final version

[Author]

Posts