Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 17, 2013 at 11:07 pm #177202
    MuzSolutions

    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 #177205
    MuzSolutions
    This reply has been marked as private.
    October 17, 2013 at 11:50 pm #177215
    Josue

    Hi!

    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 #177221
    MuzSolutions

    Awesome. 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 #177384
    Ismael

    Hi!

    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,
    Ismael

    October 21, 2013 at 11:44 pm #178716
    MuzSolutions

    I appreciate the help, but that makes no change. Any other suggestions?

    October 22, 2013 at 12:13 am #178731
    Josue

    Hey!

    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,
    Josue

    October 22, 2013 at 12:29 am #178748
    MuzSolutions

    Awesome. 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 #178765
    Josue

    Hey!

    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,
    Josue

    October 22, 2013 at 3:16 am #178819
    MuzSolutions

    Excellent! 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,
    -Joshua

    October 22, 2013 at 3:23 am #178823
    Josue

    You are welcome Joshua, glad we could help :)

    Best regards,
    Josue

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Trying to style the menu’ is closed to new replies.