Large website logo and Navigation centred

[jimmy]

I would like to have a large website logo centred, spanning 12 columns. And have the menu below centred also spanning 12 columns.

I have edited header.php to:
<divid=”logo”class=”span12 clear fix”>

<div id=”nav-section” class=”<?php echo $nav_class;?> span12 clear fix”>

Added custom CSS:
.nav-wrap {
padding: 0 0 0 260px};
}

Plus a few tweaks in the theme ‘Header options’. Results attached.

This works OK in a browser but falls apart on tablet and mobile devices.
Can anyone help resolve the issues on the mobile and tablet devices so that the navigation alignment doesn’t fall apart?

[Swift Ideas – Ed]

Hi there,

Please see this guide: http://support.swiftideas.net/knowledgebase/how-to-center-the-menu-and-logo/

– Ed

[jimmy]

Thanks Ed.

The code within the related guide does seem to render the logo and navigation better on mobile devices.

By setting ‘Logo right’ and ‘logo right spacing’ to 110px I was able to get the logo and navigation centrally aligned.

When you resize the browser window the alignment does fall apart a bit – logo cut off and menu selected moving (Attached re-size.jpg).

Can you amend the custom CSS so that the search is included in the navigation? When I remove:

/* Disable the nav search */
#nav-search {
display: none;
}

The search appears bottom left, illustrated in the attached search.jpg

Regards,
Jimmy

 

[Cosmin – SUPPORT]

Hi Jimmy,

To target mobile devices with CSS, you need to add your mobile-specific CSS code in something like this:

@media only screen and (max-width: 768px) {
  /*your CSS code here*/
}

For the navigation, I see you added some left padding, maybe try and reduce that or left align the nav on mobile, so that the search icon doesn’t spill onto the next row.

Regards,

————————————————————————————————————

Cosmin
Support Assistant