Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 8, 2016 at 2:58 am #644462
    Scott Beyer

    Hello. I am using Enfold 3.5.4, and my header is configured for the logo on the left and the menu on the right.

    However, on the home page I would like to center both the logo and the menu. I have added CSS for the home page to center the logo, but am having no success with centering the menu. I saw some old threads about this where the recommended fix was to add:

    .home nav.main_menu {left: 25%;}

    But this is not working. The menu does not remain centered when I resize the window. Is there CSS you can provide to help me with this?

    Many thanks!

    June 8, 2016 at 7:14 am #644578
    Jordan

    Hey Scott,

    Thanks for getting in touch with us!

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help with the CSS. That way it will be more specific to your needs :)

    Best regards,
    Jordan

    June 9, 2016 at 4:24 pm #645532
    Scott Beyer

    Sure! The default header I am using throughout the site is lego left, menu right, sticky. Link included below.

    On the home page (link below), I have increased the header height and centered the logo. I also wish to center the menu. This is the CSS I am currently using to accomplish this:

    @media only screen and (min-width: 768px) {
	body.home #header {
		height:160px;
		position: relative!important;
	}
	
	body.home .logo {
		transform: matrix(1, 0, 0, 1, -300, 0);
		top:25px;
		left: 50%;
		height: 74px;
	}
	
	body.home .logo a,
	body.home .logo a img {
		height: 74px;
		width: 600px;
		padding: 0px;
	}
		
	body.home nav.main_menu {
		top: 100px;
	}
}

    Thanks for your help!

    June 12, 2016 at 4:41 am #646780
    Ismael

    Hi!

    Thank you for the info. Please add this inside the css media query in order to center align the navigation:

    body.home nav.main_menu {
    top: 100px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

    Cheers!
    Ismael

    June 13, 2016 at 2:02 am #647104
    Scott Beyer

    Thank you very much! That got me most of the way there. The individual list items inside were still being floated left, but I added this to what you posted, and I’m now getting the desired result:

    	body.home #avia-menu li.menu-item-top-level{
		float:none;
		display: inline-block;
	}

	body.home #avia-menu #menu-item-search {
		float:none;
		display: inline-block;
	}
    • This reply was modified 8 years, 5 months ago by Scott Beyer.
    June 13, 2016 at 3:49 am #647115
    Vinay

    Hi,

    Glad it’s sorted :)

    FYI To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold!

    Best regards,
    Vinay

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Centering main nav menu’ is closed to new replies.