Bottom Menu Bar

Discussion in 'BlackBird WordPress Theme' started by louanncovi, Jun 20, 2013.

  1. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    Am I am to create an identical second menu bar at the bottom of my website pages? It would not have to be in a menu bar, but with at least the same categories, for easy navigation? Site address is http://www.covitravel.com/teahouseconnection/
     
  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Go to

    Appearance > Menus

    Create a custom menu and only add the pages you want to show in the footer menu.
    Now,
    Go to
    Appearance > Widgets
    Drag Custom menu widgets and drop it in the first widget area.
    Sending image for reference
     

    Attached Files:

  3. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    I need help with your response. My site: http://www.covitravel.com/teahouseconnection/
    I have created the custom menu and added the pages, and dragged the custom menu widgit into the primary widgit area. Nothing changed. Have I missed a step?
     
  4. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Issue resolved, Please check your website.
     
  5. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    I see these links stacked on the bottom of each webpage. How do I make them line up in a horizontal line? Similar to the Top Menu, but they don't need to be in a menu wrapper. I would like one vertical separator line in-between each link, about the height of the text.
     
  6. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,
    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    .footer ul li {
    display: inline;
    }
    .footer .widget_inner .menu-bottom-container li {
    border-left: 1px solid red;
    padding: 10px;
    }
    .footer .widget_inner .menu-bottom-container li:last-child {
    border-right: 1px solid red;
    }
    This will solve your issue.
     
  7. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    I pasted the code, and the text is now viewing horizontally. How do I space out the links across the bottom of the page, so there is more space between them? http://www.covitravel.com/teahouseconnection/
    Also, can you tell me if it is possible to place to links in a menu wrapper?
     
  8. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,
    1. For your first issue,
    we have already provide you the code above for this issue you have to just adjust the value of padding.

    2. Please clarify your second issue little more.
     
  9. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    http://www.covitravel.com/teahouseconnection/
    For 2:
    I was wondering if I could have the bottom menu links appear in a color bar (similar to the top menu).
    For 1:
    I adjusted your code to read as below, but nothing changed:

    .footer ul li {
    display: inline;
    }
    .footer .widget_inner .menu-bottom-container li {
    border-left: 10px solid red;
    padding: 50px;
    }
    .footer .widget_inner .menu-bottom-container li:last-child {
    border-right: 10px solid red;
    }
     
  10. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,


    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    .footer ul li {
    display: inline;
    padding:30px;
    padding-top:20px;
    }
    .footer .widget_inner{
    background:#663399;
    min-height:54px;
    }
    
    Adjust its value as per your requirements.


    This will solve your issue.
     
  11. louanncovi

    louanncovi Member

    Joined:
    Jun 12, 2013
    Messages:
    116
    Likes Received:
    1
    Location:
    Sun City West, AZ USA
    :) I have the bottom bar appearing now and have adjusted the padding. Can I also adjust the fontcolor to match the top menu bar?
     
  12. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107

Share This Page