Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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.
    #177205
    This reply has been marked as private.
    #177215

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

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

    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

    #178716

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

    #178731

    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

    #178748

    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!

    #178765

    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

    #178819

    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

    #178823

    You are welcome Joshua, glad we could help :)

    Best regards,
    Josue

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