IMPORTANT MESSAGE REGARDING THE FORUM

As you may already know, the JoomlaWorks Forum is powered by Kunena (the only decent forum component for Joomla).

Unfortunately, the latest update for Kunena has seemingly broken all code snippets (old and new) in the forum.

Until this message is removed, please paste any code as regular text - in other words, don't use the [code]...[/code] tags in Kunena's post editor.

Keyword

Main Menu wrap problem

  • Leslie Fournier
  • Leslie Fournier's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 6 months ago #138265 by Leslie Fournier
Main Menu wrap problem was created by Leslie Fournier
1. There seems to be a problem with the way the main menu wraps. See first picture from your demo where the menu item wraps on the right side so "contact" overlays the search box making it unusable?

2. I have a related problem with the menu when I add css to make the logo move down... it's a larger logo and I don't want the header height that big... it looks great until I scale down, then the logo goes behind the menu. The code I used is -
h1#logo a img {
border-radius:7px;
box-shadow: 3px 3px 5px 0px #333;
position: absolute;
top:-12px;
z-index: 1;
}

Is there a way to apply that code only to large-8 and not small-12 or mobile-2? I tried putting in the id and class suffix but it don't work.

Thanks again in advance. Your support has been really top notch!

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 6 months ago #138266 by Krikor Boghossian
Replied by Krikor Boghossian on topic Main Menu wrap problem
Hello Leslie,

Unfortunately I can not verify this behaviour. Which browser are you using and what are the dimensions of your viewport?

For 2. try increasing the z-index value. Try 9999 for instance.

Please Log in or Create an account to join the conversation.

  • Leslie Fournier
  • Leslie Fournier's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 6 months ago - 7 years 6 months ago #138267 by Leslie Fournier
Replied by Leslie Fournier on topic Main Menu wrap problem
Hi Krikor, The search box (or wrapping on the right) happens on every browser I've tried it on... Mac (Mavericks) Firefox, Safari, Chrome, Windows Firefox, IE. It happens at a window width between 985 and 1075.

Increasing the search z-index fixed it...

It did not fix the other problem, however.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 6 months ago #138268 by Krikor Boghossian
Replied by Krikor Boghossian on topic Main Menu wrap problem
Can you send me a link please, or is it fixed?

Please Log in or Create an account to join the conversation.

  • Leslie Fournier
  • Leslie Fournier's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 6 months ago - 7 years 6 months ago #138269 by Leslie Fournier
Replied by Leslie Fournier on topic Main Menu wrap problem
tinyurl.com/q3occ87

Thanks again Krikor. The menu doesn't get covered on Safari now but the logo doesn't move to the center top position. It just gets smaller. At small sizes the logo gets very tiny and unreadable. It still covers the menu a bit in Firefox.

I had more top menu items than the template and I don't want them to wrap automatically I put this css in -

.row .large-4 {
position: relative;
width: 20%;
}
.row .large-8 {
position: relative;
width: 80%;
}

Maybe I could have done it in a different way? It's the tablet sizes that seem to have a problem. Can't a suffix be used so the logo height adjustment only happens at larger screens?

Update: I made more adjustments so there are no overlaps at any size now even though the logos not moving to the center top at smaller sizes. I'm not sure I should be adjusting the .row .large-4 and .row .large-8 widths but that's how I got it to work, by adjusting those sizes inside of @media screen... max-width:1200px and 61.538em.

Are there standards that say .row .large-4 is always 33.33333% and .row .large-8 is always 66.66667%? or is it OK to change those widths. (so sorry for my ignorance here...)

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 6 months ago #138270 by Krikor Boghossian
Replied by Krikor Boghossian on topic Main Menu wrap problem
It's not a matter of ignorance.
Since you know your way around coding I will give you a really useful resource.

foundation.zurb.com/docs/v/4.3.2/components/grid.html
This is the grid we used in that template. You can change the large-4 to large-3 and the large-8 to large-9
(and then the small class to small-x) with no hassle.

This way you do not need to always redeclare widths in your CSS file.

Do you want to ultimate control over your grid?
Open the template.css file, look how the grid is constructed and add a media query with a medium grid just for tablets.
Hint you take a look at Foundation's 5 grid:
foundation.zurb.com/

Please Log in or Create an account to join the conversation.

  • Leslie Fournier
  • Leslie Fournier's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 6 months ago #138271 by Leslie Fournier
Replied by Leslie Fournier on topic Main Menu wrap problem
You're right on. That's the way it really should be done.. using the correct class instead of changing the definition of a predefined class through css. Thank you very much for the links to Foundation. It's exactly what I need to get a grasp on this.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 6 months ago #138272 by Krikor Boghossian
Replied by Krikor Boghossian on topic Main Menu wrap problem
I 'm glad I could help :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum