[adrian]

hi guys,

I need some help regarding the navigation menu: I want to display the 1st level menu items horizontally instead of vertically (the default), as detailed lower:

Main Menu: home Item1 Item2 Item3
When hovering Item1 it should display a horizontally list like: Subitem1 Subitem2 Subitem3
instead of the vertically default one: Subitem1
Subitem2
Subitem3

Can you point a link or something to read suitable for a beginner in coding?

This is the setup:
– child theme
– one modification in the child theme style sheet: centered menu items using one of your previous answered topics
https://www.themehorse.com/support-forum/topic/center-align-for-menu/

In this menu will be only 1st level items, no future children items.

Thanks for the theme and for your support,

[Sanjip Shah]

@adrian Can you provide a link to your site?

[adrian]

Sorry, I’m using WampServer, so all the customization takes places on my pc.

🙁 can I help in a other way?

[Sanjip Shah]

@adrian Try the following css. In the dashboard, go to Appearance->Theme Options->Design Options tab->Custom CSS. Paste the following css and click on ‘Save all Changes’.

#access ul li ul {
    width: 600px;
}
#access ul li ul li {
    float: left;
}

[adrian]

🙂

worked like a charm!

thank you Sanjip!

I’m interested in adding a functionality to the attitude free theme I’m using – I’ll just send the enquiry to the paid support section of your contact page

[Sanjip Shah]

@adrian Okay. Great! Yes you can send the mail, our pad support team will look into it. Thanks.

[adrian]

cheers Sanjip!

I was tinkering with the code you provided in order to make further adjustments – start the box with the child menu items right under the first main menu item (instead of it’s ancestor as it is now).

The only thing I managed to do was to re-position the container a little bit to left by simply adding the line in italic

#access ul li ul {
    position: absolute;    /* in the parent theme style sheet */
    <em>left:-200px;</em>
    width: 978px;          /* 600px in your original code; modified for testing */     
}
#access ul li ul li {
    float: left;
}

Of course, this re-positioning is actually relative to each parent menu item. I’ve read and tried some tutorials about css position but I wasn’t able to do it.

Should it be done with “position: relative;” instead of “absolute”?

Thanks,
Adrian

P.S. I’ve sent that mail to the paid support team, unfortunately because it was related to the use of woo commerce it can’t be solved by them now, as woo is not supported currently; maybe next time I will be lucky.

[Sanjip Shah]

@adrian The position related css can really be complex specially in the navigation areas. I think you will help to hire a developer on this one to adjust the menu part perfectly. Thanks.

[Author]

Posts