Working with Menus in BoldGrid | BoldGrid
Last updated on

In this guide, we will show you how you can start working with menus in your BoldGrid site. BoldGrid gives you the ability to create, delete, reorder, add items, or assign menus to locations on your website. By working with menus, you can easily setup your social media menu to link to your own accounts.

Menus are the primary navigation method for your site visitors. They will be using the menus to learn more about your site, navigate between pages, and interact with your site offerings. For business owners, menus provide an opportunity to communicate your goals and values to your customer as well as an avenue for them to communicate with you.

It is less likely a visitor will stay on your site long enough to read it if they find difficulty navigating pages. Designers should provide an easy path for visitors to follow, and BoldGrid adds all the functionality you will need to do this right from the WordPress Customizer.

Working with Default Menus

If you started with a BoldGrid Inspiration, you may notice you have some default menus already installed. These menus will have a name and a current location. BoldGrid comes with a series of Menu Locations you can use. If a menu is currently occupying one of those locations, you can see the name of the menu in parentheses.

How to Create a New Menu

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. You will see the existing menus listed. Click the + Add a Menu button.2016-1-adding-menu
  4. Enter your new menu name, then click the Create Menu button. You must then add items to the menu, which is covered in the next section.2016-2-creating-menu

Automatically Add New Pages to Your Menu

After choosing a menu location for your new menu, you will notice the Menu Options below. If you would like a new menu item to appear for new pages, check the box labeled Automatically add new top-level pages to this menu. Continuing along in this WordPress Customizer series, you are going to learn more about using Widgets in your site.

How to Add Menu Items

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. Click the menu you want to add items to, then click the + Add Items button.2016-3-add-menu-items
  4. Choose the type of menu item you want to add, then click the Save & Publish button. Options are Custom Links, Posts, Pages, Categories, or Tags.

How to Delete a Menu

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. You will see your menus listed. Select the one you want to delete.
  4. Click the Delete Menu link.2016-5-delete-menus
  5. Click the Save & Publish button.

How to Setup your Social Media Menu

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. Select the Social Media link.2016-6-social-media-menu
  4. You will then see a list of available social media options including Facebook, Twitter, Google Plus, LinkedIn, and Youtube. Click them to add a link to a link to your social media page. You only have to setup the ones you want to use.2016-7-social-media-menu
  5. Click the Save & Publish button.

How to Reorder menus

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. Select the menu you want to reorder.
  4. Click the Reorder link.2016-8-reorder-link
  5. Click the arrows to move the menus up and down. Items higher on the list display first on the menu.2016-9-reordering
  6. Click the Save & Publish button.

How to set Menu Locations

  1. Login to BoldGrid.
  2. Click Customize, then Menus.
  3. Click the Menu Locations link.2016-10-menu-locations
  4. You will see the menu locations listed such as Primary Menu, Left Below Primary Navigation, Right Above Primary Navigation, Header Upper Right, and Footer Center. Keep in mind the menu locations will differ based on your specific theme. Click the drop-down box below the menu locatons to choose which menu will display there.2016-11-choose-menu-locations
  5. Click the Save & Publish button.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

58 thoughts on “Working with Menus in BoldGrid

  1. Hello, I am working with the Swifty theme and it appears that if I want my Primary Menu to display properly as a nested menu, it can only be placed in the location of Primary Menu. Once I move it to a location of Header Top or Header Bottom, it will not appear as nested anymore. Is this correct? I have completely deleted the Menu and rebuilt it but that didn’t fix anything. The default location of Primary Menu is unfortunately too short to make all of my menu items appear in one line, even when nested. Thank you!

    • Hello Bridget-
      Yes, you’re right that the secondary and tertiary menus, “Header Top” and “Header Bottom” in Swifty, do not support nested menu items. In order to accomplish this, you can use this snippet of code with the Code Snippets plugin to add nesting support:

      • Thanks so much Jesse — got this installed, pasted the code, and it does take the sub-menu items out of the main menu line. However, when I hover over the menu item, none of the sub-menu items display below it. So the sub-menu pages aren’t accessible. Any code fix for that?

        • Hi Bridget-
          Sorry about that, I made a mistake and missed the navbar-default class. I’ve updated the code above, so if you reload this page and re-copy the code, it should work as expected now.

          • No worries, that worked, thanks!

            One last question and I’ll leave you alone.

            Changing that code magically changed the alignment of that one menu to be right-justified, rather than centered.

            I had previously been trying out modifying different parts of styles.css to get it left-justified. I located one item that was right-justified, but changing that code didn’t change anything with this menu.

            Am I on the right track to keep [cautiously] poking at styles.css to change this alignment, or is there another file I should be focused on instead?

            Thanks!

          • Hi Bridget-

            First thing, I don’t recommend changing the styles.css file directly, because any changes you make will be overwritten next time the theme is updated. Instead, use the Custom Theme CSS in Customize > Advanced > Custom JS & CSS. Once you’re there, add this CSS rule to left-justify the secondary menu:

            div.secondary-menu {float: left;}

            If you’re using the “Header Bottom” location, use this instead:

            div.tertiary-menu {float: left;}
  2. How do I create a drop down menu within my menu? I sell food and jewelry under the same title and I’d like a way to indicate that while keeping them separate.

  3. I have a bunch of listings that I want to have links that lead to their own separate page that is not visible in the menu. Like, you see something and you click on the more info button, and it takes you to a page dedicated to that one thing, but the only way to get there is by clicking the more info button. How do I do that?

    • Hi Eperpetua-
      If each listing has its own page, you can do this with a button. If you’re using the Post and Page Builder, click the + button at the top of the editor, and choose a button. Then, you’ll be able to link the text “more info” to your page.

  4. Hi. I’m using the Swifty theme. I created a primary menu (orange boxes with white writing). It shows up fine on a large screen, but when the screen is medium or small, the primary menu disappears entirely. I know on mobile, menus usually default to a hamburger menu, but I don’t see it (perhaps it’s white on white).

    How do I either keep the primary menu the same on medium and small screens (orange boxes with white writing) or change the color of the hamburger menu so users on smaller screens can see them?

    I’d like to test both to see what looks best. Thanks!

    • Hi Arthur,

      If you are using Crio to design your website then you will find the controls to change your header layout by navigating to Design > Header > Layout in your website Customizer. You will then be able to add new header sections and reorganize the content as need to get the design you are looking for! We also have a guide on customizing your header design with Crio that should be useful as a reference.

  5. When on mobile my primary menu located in the top header collapses into a hamburger menu. That’s great. Except that is placed a line below the site title. How do I move the hamburger menu to the top line next to the site title?

    • Hi Travis-
      The specific answer to this is going to depend on the theme you’re using, but I took a few minutes to make this video to show you how to do it.

      Here’s the code from the video:
      jQuery('.header-6').not('.row').addClass('col-xs-6');
      jQuery('.header-7').not('.row').addClass('col-xs-6');

  6. on my Wedge -child theme, Primary Naviagation Menu Bar is white. ive deleted and readded. still white utiil i hover i get one menu item at a time show up. On mobile the enitre menu it white-out. Was not happening until i installed the child theme. How can i fix?

    • Hello Dionne-
      If you’re creating a child theme, make sure you’re enqueueing the computed styles from the parent using the instructions found here. Specifically, you’ll need a function like this in your functions.php file:
      function boldgrid_enqueue_styles() {
      $parent_style = 'boldgrid-wedge';
      wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ),
      wp_get_theme()->get('Version') );
      }
      add_action( 'wp_enqueue_scripts', 'boldgrid_enqueue_styles' );

    • Hello Brenda-
      This is called creating an Anchor Link. You’ll need to add an ID to a piece of your page, such as a heading, and then create a link to that ID using the # symbol. For example, if you had a heading that was called <h2 id="section-home">, you can link to it with <a href="#section-home">. I took a few minutes to make a video to walk you through doing it the easy way:

      More info can also be found in this article about using anchor links.

  7. am i able to adjust the line spacing on a menu? on a laptop it’s fine, but, on a mobile the third item is below and too close to the top items.

    • Hi David-
      If you’re using a BoldGrid Theme, you can target your menu items with the CSS selector li.menu-item a. So for example, if you only need to increase the line-height on mobile, you can use code like this in your Custom Theme CSS:
      @media only screen and (max-width: 768px) {
      li.menu-item a { line-height: 1.5em; }
      }

  8. Where exactly in the css do I edit to remove the button background color of the dropdown menus?
    The theme I am using is Hifidel.

    • Hi Arthur-
      The dropdown menus in Hifidel use the first and second color palette options in your Customize -> Colors menu:
      The Color Palette and Dropdown Menus in Hifidel

      I recommend using the color palette to keep your site design consistent, but if you do only need to remove the background color of the dropdowns, use this CSS code in your Customize -> Advanced -> Custom JS & CSS menu:

      ul.dropdown-menu { background: transparent !important; }

      You can also use another color in place of transparent if you need to.

  9. Hi there!

    Please help me.
    1. How our Navigation bar will stick to the top when we reach its scroll position. using bold grid themes and other than Boldgrid themes.
    2. How can we finish ATTRIBUTION PAGE linked in footer of Boldgrid themes Named as ” SPECIAL THANKS”.

    Best Regards,

    Javed Awan.

    • Hi, Javed.

      Thanks for posting your comment regarding the navigation bar appearance when scrolling and how to edit the Attribution Page linked in your footer.

      The scroll effect requires custom CSS modification. You can use the following code:

      #site-navigation {
      background:#83745d;
      height:60px;
      z-index:170;
      margin:60 auto;
      border-bottom:1px solid #dadada;
      width:100%;
      position:fixed;
      top:0;
      left:0;
      right:0;
      text-align: center;
      }
      .site-branding {
      margin-top:60px;
      }

      You would add this code by navigating to Customize > Advanced > Custom JS & CSS, then copying/pasting it into the field labeled: Custom Theme CSS.

      NOTE: This is the code used for a test website I have, you may need to make adjustments to the code to customize the appearance, to match with your website.

      The Attribution page is not able to be edited. However, if you are using a Premium Connect Key, you can use our guide, how to remove the Attribution/Special Thanks Link, to remove it.

      I hope this helps!
      Sincerely,
      Carlos D

    • Hello Jabar,

      You should be able to re-add them by using the Social Media widgets. Follow this tutorial and it should help you get them back in place. If you continue to have problems, please let us know.

        • Hello Alex,
          By default, BoldGrid Themes handle the Social Media icons as a Menu, not a widget. If you do need to use the social media menu as a widget, choose the Navigation Menu type of widget and select your Social Media Menu from the options there. Or, you can check out these many other social media widgets available on the WordPress Plugin Repository.

  10. janterraadmin says:

    Hi I was wondering why I would have child pages showing up on my main menu, and as they should be as child pages? I should not this is only a few of them, there are other child pages that are presenting as they should.

    • Hello janterraadmin,
      Thank you for contacting us. As a test, try deleting the menu item from the main menu as described above. This should remove the link to the pages in your menu.
      Thank you,
      John-Paul

    • Hi, Julie.

      Yes, you can make the Top Menu without having a link to click on. Have a look at our article on How to Disable a Top Menu Item Link. Setting up the “Custom Link” menu item as outlined in the guide, will result in a non-clickable menu item (like the top menu), which you can add sub-menus to, as well. I hope this helps!

      Sincerely,
      Carlos E

  11. How do I change the color of the text of my menu. The current color is not in the color palette I chose and does not show against the background I want for my home page. Thanks!

        • Hello Luciana-
          In Haven, the menu’s hover/active color is the 4th color in your color palette, and the inactive color is the 5th color. You can access this by going to Customize -> Colors Showing the menu Hover and Active colors in the Customize Colors menu You can also modify these manually using custom CSS in your Customize -> Advanced -> Custom JS & CSS menu. You can use a CSS rule like this- simply replace the color codes with the ones you need:
          .palette-primary .navbar-default .navbar-nav > li > a { color: #e7e7e7; }
          .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a:hover { color: #000000 !important; }

    • Hello Benjamin,

      Apologies, but there is no direct way to change the font of the menu. You may want to adjust your background image using an image editor. Themes developed for BoldGrid are responsively designed so that the color and font type are considered against the background image.

      If you have any further questions, please let us know.

      Kindest regards,
      Arnel C.

        • Also, how do I move the menu items to the left? In the ‘Evolv’ theme they are far to the right and I want to move them down and towards the left side.

          • Hello Madhan-
            The Evolv Theme is designed to use a right-side primary menu, but you can accomplish this with a couple of steps.
            1. Navigate to Customize -> Menus -> Primary
            2. Un-check “Primary Menu” and check “Below Header”
            3. Navigate back to Customize -> Advanced -> Custom JS & CSS and paste the following code into Custom Theme CSS:
            .header-8 { padding-left: 0px; }
            #tertiary-menu { text-align: left !important; }
            #tertiary-menu a { font-size: 18px; } //Adjust font size to your need

    • There is not currently a “built-in” way to make a floating menu in BoldGrid. This means you will have to custom-code a solution or use a 3rd party plugin for adding this functionality. There are many plugins available for adding a floating menu in WordPress, view them here:
      https://wordpress.org/plugins/search.php?q=floating+menu

      You may have to test several to determine the one that works for you. Ensure it is compatible with the latest version of WordPress (4.7).

    • Hello rd,

      You can adjust the size of the icons by using the Custom CSS tool located in the Advanced tab of the Customizer. Simply add the following code, close the editor, and click the “Save and Publish” button.

      #menu-social i {font-size:30px;}

      You can adjust the number 30px up or down to for the icon size.

      Kindest Regards,
      Scott M

        • Here are the basic steps, though it may differ on your specific theme.
          1. Login to the Dashboard
          2. Click “Customize”
          3. Click “Menus”
          4. Click the menu you want to add a child to, such as “primary”
          5. Add menus as needed
          6. Move the new menus below the menu you want to drop down, and drag them slightly to the right, almost like it is indented. It will then add the menu item as a drop down option

      • Question: If I set a Child Menu for the Primary Menu Location it works..but if I try to set a child drop down menu on the Top Menu it does not create a drop down. How do I fix?

        • Hi Jen,

          I’m sorry to see you are experiencing issues with your Menus. I’m not quite sure what you mean by Child, Primary, and Top menus. To add a drop-down to your menu, simply drag and drop to indent the item in the list of menu items. If you are still experiencing issues with this, please be sure to provide the exact steps you are taking so we can replicate the issue you are having. At this time though, I am unable to determine an issue with BoldGrid menus, as described in this guide.

          Best Regards,
          Carlos D

Leave a Reply to Scott Cancel Reply

Your email address will not be published. Required fields are marked *