menu bar

• 

  gregsavenow · Member · Mar 30, 2017 at 12:27 am

  • Copy link
  • Add topic to favorites

  The theme I just changed to shows a menu bar across the top in the model, but it is on the bottom of the page when I tried it out. How can I move it to the top?

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

• 

  otpidusprime · Member · Mar 30, 2017 at 11:43 am

  • Copy link

  Hi there,
  First step you should do is activate the menu, i cant see any menus on your site.

  Follow these steps to activate the menu:
  STEP 1:
  Click on My Site from the top left corner of the WordPress menu bar.

  STEP 2:
  Under the Personalize category you will see “Customize” button along with the Themes menu. Click on that. This will open the Theme Customizer.

  STEP 3:
  Now Click on “Menus” from the lest sidebar. You will now see an option called “Menu Locations“, click on that.

  STEP 4:
  You will see 2 dropdown options. One for Primary Menu and one for Secondary Menu. Click on the dropdown of the Primary Menu you can now see 2 options Primary and Social. Select Primary.

  STEP 5:
  Click “Save” on the top of the sidebar.
  __________

  Now to move the menu on the top you need to customize the underlying CSS code of the site. You will need access to the WordPress.COM CSS Editor to do this which requires a Premium or Business WordPress.COM plan.

  Read more about it here: https://en.support.wordpress.com/custom-css/
  __________

  You need to change the following CSS code to move the menu to the top of the featured image section(just like it is on the Theme Demo):

  #site-navigation-wrapper {
      bottom: 0;
      position: absolute;
      width: 100%;
  }

  to this:

  #site-navigation-wrapper {
      top: 50px;
      position: absolute;
      width: 100%;
  }

  You will need to adjust the value of the “top” according to your theme.

  There’s a black background and border present in the menu bar-here’s the code:

  .main-navigation {
      background: #2d2a26;
      border-bottom: 1px solid #49443d;
      border-top: 1px solid #49443d;
      clear: both;
      display: block;
      font-family: Karla, Arial, sans-serif;
      width: 100%;
      z-index: 10000;
  }

  if you wish to remove them(to go with the theme) you will have to remove the background, border-bottom and border-top CSS properties. The new code should look like this:

  .main-navigation {
      clear: both;
      display: block;
      font-family: Karla, Arial, sans-serif;
      width: 100%;
      z-index: 10000;
  }

  Hope this helps :)

• 

  gregsavenow · Member · Mar 30, 2017 at 3:56 pm

  • Copy link

  Thanks!

• 

  otpidusprime · Member · Mar 31, 2017 at 8:28 am

  • Copy link

  You’re Welcome :) and all the best.