Logo and Menu customization

• 

  semonikzaudio · Member · Apr 19, 2017 at 11:55 pm

  • Copy link
  • Add topic to favorites

  My site is https://semonikzaudio.com/ and I’m using the Swell theme.
  I’d like to center the logo and navigational menu at the top, with the navigational menu appearing beneath the logo. I’m also concerned how to change will affect mobile. Can you help me with the CSS for that?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 20, 2017 at 9:39 am

  • Copy link

  Hello @semonikzaudio,
  Use this CSS codes to:
  1. Centerize the logo:

  #logo {
      display: block;
      float: none;
      max-width: 300px;
      margin: 0 auto;
  }

  2. Move the navigation menu below the logo and centerize:

  #main-nav {
      display: flex;
      position: relative;
      justify-content: center;
      padding: 30px 0px;
  }

  Some fixes for the logo on mobile to move it to the center of the screen:

  @media only screen and (max-width: 880px) {
      #logo {
          padding-left: 25px;
      }
  }

  Hope this helps. 🙂