-
AuthorPosts
-
October 17, 2013 at 11:07 pm #177202
Hello, I’m trying to style the menu of a site I’m working on to be a long sliver with menu items spaced along the full length. Will post a private reply with url to example.
- This topic was modified 11 years, 2 months ago by MuzSolutions.
October 17, 2013 at 11:13 pm #177205This reply has been marked as private.October 17, 2013 at 11:50 pm #177215Hi!
Add this code to the Quick CSS:
#header_main_alternate .container{ width: 100%; margin: 0; } .bottom_nav_header.social_header .main_menu>div, .bottom_nav_header.social_header .main_menu ul:first-child{ height: 25px !important } .bottom_nav_header.social_header .main_menu ul:first-child > li a { padding: 0 30px !important; height: 25px; line-height: 25px; border: 0 !important } .avia-menu-fx { display: none !important; }
Regards,
Josue- This reply was modified 11 years, 2 months ago by Josue.
October 18, 2013 at 12:04 am #177221Awesome. If you take a look at the site you could see I made the changes you recommended and it turned out perfect. The only issue is the menu is left justified instead of spread across the menu bar like the example. How could we do that?
Thank you for the help. I’m trying to use firebug to find the css to change but I’m running into a wall until I become more familiar with enfold.
- This reply was modified 11 years, 2 months ago by MuzSolutions.
October 18, 2013 at 2:20 pm #177384Hi!
You can adjust padding to spread the menus:
.bottom_nav_header.social_header .main_menu ul:first-child > li a { padding: 0 39px; }
You will need to use Media Queries to change the paddng on different screen sizes like this example:
@media only screen and (min-width: 768px) and (max-width: 989px) { .bottom_nav_header.social_header .main_menu ul:first-child > li a { padding: 0 39px; } }
Regards,
IsmaelOctober 21, 2013 at 11:44 pm #178716I appreciate the help, but that makes no change. Any other suggestions?
October 22, 2013 at 12:13 am #178731Hey!
It’s because the other code is overwriting it, this should be the final one:
#header_main_alternate .container{ width: 100%; margin: 0; } .bottom_nav_header.social_header .main_menu>div, .bottom_nav_header.social_header .main_menu ul:first-child{ height: 25px !important } .bottom_nav_header.social_header .main_menu ul:first-child > li a { padding: 0 39px; height: 25px; line-height: 25px; border: 0 !important } .avia-menu-fx { display: none !important; }
The part that handles the width of each navigation element is the padding property (padding: 0 39px), you can try with different sizes (padding: 0 60px, padding: 0 80px, etc).
Best regards,
JosueOctober 22, 2013 at 12:29 am #178748Awesome. It’s working now, but when I change screen sizes the blog menu item will disappear. How would we correct this? Is there a way to make this percentage based so items don’t get kicked off?
Hope this makes sense. Thanks for the help!
October 22, 2013 at 12:52 am #178765Hey!
The percentage would need to be applied to the li element then, this code will work:
#top .main_menu .menu li { float: left; position: relative; z-index: 20; width: 12.5%; text-align: center; }
However, you would need to change that 12.5% width value if you change the number of elements in your menu (100/8 = 12.5).
Regards,
JosueOctober 22, 2013 at 3:16 am #178819Excellent! That fixes everything and I understand about changing the menu elements. You rock. I’m now at 90% completion of the site getting ready to deliver it tomorrow thanks to your help. Hope you guys continue to get more sales because you deserve it!
God Bless,
-JoshuaOctober 22, 2013 at 3:23 am #178823You are welcome Joshua, glad we could help :)
Best regards,
Josue -
AuthorPosts
- The topic ‘Trying to style the menu’ is closed to new replies.