Center Navigation

[stuartal12]

Hello –

I would like to center the main navigation links. Please advise.

thanks.

[Cosmin – SUPPORT]

Hi,

You will need to edit header.php and change the layout for the logo and menu wrappers (make the menu wrapper with a class of span10), then add custom CSS to center the actual menu.

This is just a pointer, as this is an advanced customization that theme support cannot cover.

Regards,

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

Cosmin
Support Assistant

[thethrillmill]

I have a similar question. My logo is larger and therefore creates a lot of white space in the header where the navigation is. Is there an easy way to vertically align the navigation links to the bottom of the header without going into the php (so it’s supported when future upgrades to flexform come along)?

[Cosmin – SUPPORT]

Hi,

I think that might be possible, please link to your site so I can see.

Regards,

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

Cosmin
Support Assistant

[thethrillmill]

Thanks for the amazingly quick response. Current site is here: http://www.thethrillmill.com/dev

[Cosmin – SUPPORT]

Add this custom CSS in the theme options:

#nav-section {
    margin-top: 25px;
}

Regards,

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

Cosmin
Support Assistant

[stuartal12]

Thank you for your assistance. I have a related question regarding the logo div. The logo is cutoff on the ipad, in vertical mode (see attached screen shot). It functions fine when the tablet is horizontal.

http://aqueousservices.com/

thanks,
Stuart

 

[Cosmin – SUPPORT]

Hi Stuart,

Try specifying your logo with in Header Options and see if that fixes it.

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[stuartal12]

It is specified, as 200. Works on all layouts expect the one I mentioned.

thanks

[thethrillmill]

I tried adding the code you mentioned to the stylesheet, but it did nothing.
#nav-section {
margin-top: 25px;
}

[thethrillmill]

Nevermind, got it.

[Cosmin – SUPPORT]

Stuart, try adding this custom CSS in the theme options:

@media screen and (max-width: 768px) {
  #logo img, #logo img.retina {
    max-width: 100% !important;
  }
}

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[stuartal12]

Thanks – that was almost the solution. It needed to be:
@media (max-width: 979px) and (min-width: 768px)