Tagged: , ,

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

    Hi,
    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!

    #225258

    Hey BelIblis!

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

    Cheers!
    Yigit

    #225305

    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?

    #225654
    This reply has been marked as private.
    #225722

    Hey!

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

    #225729

    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 :(

    #225821

    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….

    #225946

    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;
    background-color:#b0e0e6;
    }
    
    .avia-menu li {
    width: 140px !important;
    padding: 10px !important;
    }

    again – not working :(

    #225957

    Hey!

    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;
    }
    

    Regards,
    Ismael

    #226172

    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;
    }
    #226753

    Hey!

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

    #227567

    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?

    #228238

    Hi!

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

    Cheers!
    Yigit

    #228241

    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.