Results 1 to 4 of 4

Thread: How to create a horizontal main navigation menu?

  1. #1
    New user
    Join Date
    09-29-09.
    Posts
    8

    Default How to create a horizontal main navigation menu?

    Hello,

    I have played with the example website coming with the program. Now I am able to change everything execept one: I was not been able to set the main navigation menu in the horizontal direction. Perhaps this must be done tuning the template or the css but I do not know where to put the hands. Can I get some suggestion to perform this task?

    MAny thanks in advance,
    Luigi

  2. #2
    Official Contao Team
    Join Date
    06-10-09.
    Location
    Stuttgart, Germany
    Posts
    68

    Default Re: How to create a horizontal main navigation menu?

    Hi Luigi,

    just set for the li element this declaration:

    Code:
    .mod_navigation li
    {
    float:left;
    }
    So if you want to use the menu in header section you can specify this by css:
    Code:
    #header .mod_navigation
    {
    ..
    }
    ---------------------------------------------------
    kind regards planepix

    Official Contao team member - Official Contao partner
    workshop contao conference site 2011
    workshop contao conference site 2012

  3. #3
    New user
    Join Date
    09-29-09.
    Posts
    8

    Default Re: How to create a horizontal main navigation menu?

    Quote Originally Posted by planepix
    Hi Luigi,

    just set for the li element this declaration:

    Code:
    .mod_navigation li
    {
    float:left;
    }
    So simple?
    It worked OK (Just I had to give a wider width to look a little better but I got the idea).
    So it is matter of CSS. Here I found an interesting article to add a dropdown menu to the horizontal menu
    http://www.alistapart.com/articles/dropdowns/

    Thank you,
    Luigi

  4. #4
    Official Contao Team
    Join Date
    06-10-09.
    Location
    Stuttgart, Germany
    Posts
    68

    Default Re: How to create a horizontal main navigation menu?

    yes css is strong

    yes play with padding for the li element to get more space between each menu items.

    dropdown menus are mostly working in modern browsers, not in IE6 where you need to help with javascript.

    In the wiki there is also an tutorial to set up a "son of a suckerfish" dropdown menu in TYPOlight.
    ---------------------------------------------------
    kind regards planepix

    Official Contao team member - Official Contao partner
    workshop contao conference site 2011
    workshop contao conference site 2012

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •