WordPress.org

Ready to get started?Download WordPress

Forums

Tiny Forge
[resolved] Horizontal nav-menu (6 posts)

  1. snajvid
    Member
    Posted 5 months ago #

    How do I make the submenu in the nav menu act horizontally. At the moment it's just one tall stacked column. The submenu i have contains about 20 items and need them to spread out over four (4) och five (5) columns.

    I'm sorry if rookie Q, but I'm still fresh with CSS..

  2. snajvid
    Member
    Posted 5 months ago #

    Got help from Twitter. Problem solved.

  3. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    It would be good if you would post full answer, so other Tiny Forge users could benefit too ;)

    P.S. Don't forget to share the results of your work!

  4. snajvid
    Member
    Posted 5 months ago #

    Of course, youre right. The code which solved the problem looks like:

    .main-navigation ul.nav-menu ul.sub-menu li {
    display: inline-block !important; position:relative!important; float: left!important; width: 130px!important; margin: 0; padding: 0;
    }
    .main-navigation li ul { width: 700px; }

    .main-navigation li ul li a { width: 120px!important; margin: 0; padding: 5px;}
    .main-navigation li ul li { width: 120px!important; margin: 0; padding: 5px;}

    Worth mention is that this is at a set width and not responsive at all. I still have the same problem when the screen gets small and also on a mobile platform.

    It's the "Recensioner" on film.snajvid.com menu with the genres to the movie reviews that stacked up in one column.

    Also, off topic: but it seems impossible to link the header to homepage (www.film.snajvid.com)?

  5. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Header links automatically to the home address that is entered under settings > general.

    In order to get responsive, you have to copy that code only to media queries (style.css section 12) and not to the mail css part.

    Also on firefox header looks shifted to the side:

    http://imgur.com/e6KpjPz

  6. snajvid
    Member
    Posted 5 months ago #

    Thank you.

Reply

You must log in to post.

About this Theme

About this Topic