Horizontal menu – Outreach Pro

This topic is: not resolved

Tagged: full width, Outreach Pro, Secondary Navigation

This topic has 5 replies, 4 voices, and was last updated 9 years, 4 months ago by AliceE.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 20, 2015 at 3:19 pm #166167

AGwebstudio
Member

Hello people,

Any help with CSS? I would like to change vertical menu for horizontal menu in Outreach Pro theme. The idea is to make it like in this picture:

Original:

Horizontal:

Thank you very much in advance!
http://jesus.agwebestudio.net/

September 21, 2015 at 6:47 am #166204

Victor Font
Moderator

You might be better off using Secondary menus, however, if you remove the width dimension from .genesis-nav-menu .sub-menu, you'll have a horizontal menu. You'll still have a lot of CSS work to do to make it appear as you want, but it will be horizontal.

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

September 21, 2015 at 9:49 am #166217

stephenpasquini
Participant

On a same, but slightly different note, is there anyway to get the secondary navigation menu to extend to the full width of the frame on the page in outreach pro. I don't like the way it cuts short between the main navigation menu.

Thanks,

Stephen

September 21, 2015 at 5:20 pm #166269

AGwebstudio
Member

Hello,

But how can I use secondary menu? for example, what I mean is, if you are "what we do?" then you have this options: "company", "services", "contact". This are under "what we do?", so how I use Secondary menus? I am lost in this sorry 🙁 hehe.

Thank you for your kind help!

September 21, 2015 at 5:53 pm #166271

AGwebstudio
Member

Please, check out the web now... I nearle have done but I dont know how to make background-color full-width and the menu stay in the center of the site 🙁

Thank you very much for your time!

July 18, 2016 at 12:01 pm #189750

AliceE
Member

This is an old question, but I'll answer it anyway since I got a solution that works for me. In the Secondary Navigation section, I added min-width and text-align. I haven't checked this in all browsers yet, but in the ones that I have checked it gives me a full width secondary with the items centered as I wanted them.

/* Secondary Navigation
--------------------------------------------- */
.nav-secondary .wrap {
background-color: #111;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 16px;
min-width: 100% !important;
text-align: center !important;
}
Author

Posts