Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #225176

    Already very happy with Enfold for my last website, I’d like to purchase another license for a new website, but want that website to be centered. The entire header section (i.e. secondary menu, logo, main menu) needs to be centered. With a 300px square logo between the two navigations. I know I could go for a dedicated ‘centered’ layout, but I’d feel more familiar with Enfold…

    I’ve already read through various threads, but somehow I didn’t manage to make it look right. Even the CSS for just a taller logo on the theme’s FAQ on Themeforest doesn’t really work, because it doesn’t push the main navigation down (so I’m left with the menu & avia-bullet behind the logo).

    Can someone please help me?

    Thank you!


    Hey BelIblis!

    Can you post the link to your website so we can take a look?



    Hi Yigit,

    I haven’t put the site online yet – at the moment I’m just trying things out using a local dev environment. (I haven’t purchased the 2nd license yet anyway)

    As I said: the logo is 300×300 pixels, and all navs & logo should be centered for all screen widths, with the fixed-size-logo in between the top and bottom nav.
    Do you think that’d be possible to achieve?

    This reply has been marked as private.


    Unfortunately its really not something we can assist with customizing. The next release (2.6) is planned to have more header options including a centered version but for right now to get the logo and menu centered requires very specific custom css for desktop, responsive sizes and then cross browser fixes.

    Best regards,


    That’s really bad news :(
    Do you have a rough time-schedule for the next release? Will it be available before the end of March?

    I’ve found this site here in the Enfold showcase thread – it has the logo nicely centered. Unfortunately the custom.css is empty, though :(


    I’ve just tried the following code, and it does center everything, including mobile sizes. (I went to a slightly smaller 290×290 px logo)

    #header_main .container {
    	height: 290px  !important;
       	width: 290px !important;
    .logo img, .logo a { max-width: 100%!important; }

    The only problem: It also narrows the navigation to a maximum width of 290px. So I tried the following:

    #header_main { height: 290px; }
    #header_main .container .logo {
    	height: 290px  !important;
       	width: 290px !important;
    #header_main .container .main_menu {
       	width: 400px !important;
    	line-height: 400px  !important;

    but this moves the logo back over to the left, and the navigation to the right :(
    I think I’m close to solving the problem, but need some help here.

    In case it matters, or makes things easier: I’d like to have 4 menu items at a fixed with of 140px each….


    Forgot to say: The header type “Header with social icons and bottom navigation” would also be an option…. as long as I get the logo & nav centered.

    To get the logo centered I tried

    strong.logo {
    width: 300px;
    margin: 0 auto !important;

    … no luck :( Same for the .avia-menu div (all menu items should be fixed width, which shoud make it even easier :(

    .avia-menu {
    width: 600px !important;
    margin: 0 auto !important;
    .avia-menu li {
    width: 140px !important;
    padding: 10px !important;

    again – not working :(



    If you want to center align the logo, you can add this on Quick CSS or custom.css:

    .logo {
    width: 100%;
    .logo a {
    width: 300px;
    margin: 0 auto;



    Thanks, Ismael!
    Any idea for centering the navigation as well? (Type “Header with social icons and bottom navigation”)

    It’s a fixed with navigation: 4 menu items at 150px width each. I tried this but it didn’t work:

    .main_menu {
    	width: 100%!important;
    .avia-menu {
    	width: 600px;
    	margin: 0 auto!important;


    Please add following code to Quick CSS as well

    .bottom_nav_header.social_header .main_menu, .bottom_nav_header.social_header .main_menu { left: 25%; }

    You may need to adjust the values to center it perfectly

    Best regards,


    Thanks, Yigit. It works – but not for all screen widths unfortunately. Is there some kind of “margin: 0 auto;” solution (like it works for the logo) – or do I need to really manually calculate the percentage for each @media style?



    No, centering using margin will not work and yes, you should calculate the percentage using media queries



    Cool – thanks for your confirmation (I thought I was doing something wrong because margin didn’t work). Will calculate manually ;)

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

The topic ‘Large centered logo (300px square) above centered navigation (on all devices)’ is closed to new replies.