Float navigation far left and logo far right

  • I would like to move the main menu to the far left and the site logo to the far right as shown on this site: Carnival Films.

    I’ve played around but can’t get it quite right so have left it centred for now.

    My site is here.

    Many thanks for your help.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there!

    There are some different widths and alignments at play that might be what are causing you trouble, give this CSS a try and let me know how it looks:

    @media screen and (min-width: 960px){
.main-navigation ul {
	text-align: left;
}

.main-navigation {
    float: left;
    width: 600px;
    padding-top: 55px;
}
.site-branding {
	width: auto;
}

.site-branding {
	float: right;   
}
}
    Thread Starter lizhover

    (@lizhover)

    Thank you Chad. That totally worked. It has caused another issue on mobile though. Is there additional CSS I can add to keep the menu and logo centred on mobile?

    The code above should only apply to wider screens – double check that it’s completely copied including the @media screen and (min-width: 960px){ at the beginning, and the second } on the end.

    When I inspect your page as it is now, I’m not seeing that media query listed in the CSS ??

    Thread Starter lizhover

    (@lizhover)

    Thank you again Chad. I copied the code again and everything is fine now. Decided to keep the logo centred though. I really appreciate your help with this.

    My pleasure!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Float navigation far left and logo far right’ is closed to new replies.