0

Used omega theme and stumped at menu part.

Top right - Home Top Left - Work Bottom Left - Contact Bottom Right - FAQ

Tried to set 2 menus: top and bottom in menu zone and then set id to each links so they can be positioned accordingly but it didn't work as expected. These menus sit next to the main menu in column 1, 3, 8

How do I put the menu links in menu block then set them at the corners of the screen?

2 Answers 2

0

For those that are not familiar with Omega theme, it will be hard to help you without more information like a link or your HTML and CSS code. However, you may look up the CSS float property to achieve what you want.

0

You could use the Menu attributes module to add classes to each module (such as top-left, bottom-right, etc) and style based on those. This will be a lot more robust than using ids derived from the menu link's mid.

Next, to get the links to the corners of the screen, you will need to give them position: absolute or position: fixed. Bear in mind that that will allow you to position them relative to their first positioned (not static) ancestor element. This means that you'll have to make sure that none of the containers around the menu links have a css position of anything other than "static".

Finally you may need to add "min-height: 100%" to the html and body tags in order to make sure that the bottom-left/right links do get down to the bottom of the page.

These changes might break other styling on your page, which would probably mean that one of the containers around your menu links needs to have a position other than static. If you can't work around this then you'll need to move your menu outside of that container by (for example) overriding the relevant templates such as page.tpl.php, or if all else fails, you could use javascript to move the menu to another part of the DOM where it's styling won't effect other elements on the page. However, you should only do that if you're happy that non-javascript users will still get a sufficiently usable experience without the links being at the edge of the page.

2
  • thanks and I did that already but it doesn't go as expected. The menu zone has column-12 grid and the links stay in that zone. Not following position that I set.
    – joe
    Apr 27, 2015 at 16:57
  • This will most likely be because the menu zone has a position of "relative" or similar. you would need to override this and give it "position: static", then repeat for any other containers until you get to the body Apr 27, 2015 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.