Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 17, 2014 at 11:34 pm #225176
    February 18, 2014 at 1:23 am #225258
    Yigit

    Hey BelIblis!

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

    Cheers!
    Yigit

    February 18, 2014 at 3:47 am #225305
    BelIblis

    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?

    February 18, 2014 at 6:43 pm #225654
    BelIblis
    This reply has been marked as private.
    February 18, 2014 at 8:37 pm #225722
    Devin

    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

    February 18, 2014 at 8:45 pm #225729
    BelIblis

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

    February 19, 2014 at 12:05 am #225821
    BelIblis

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

    February 19, 2014 at 5:35 am #225946
    BelIblis

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

    February 19, 2014 at 6:23 am #225957
    Ismael

    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

    February 19, 2014 at 2:10 pm #226172
    BelIblis

    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;
}
    February 20, 2014 at 2:18 pm #226753
    Yigit

    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

    February 21, 2014 at 5:09 pm #227567
    BelIblis

    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?

    February 23, 2014 at 11:06 pm #228238
    Yigit

    Hi!

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

    Cheers!
    Yigit

    February 23, 2014 at 11:16 pm #228241
    BelIblis

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

  • Author
    Posts
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.