WordPress.org

Forums

how to add horizontal footer to theme - exposure (14 posts)

  1. hmpk
    Member
    Posted 1 year ago #

    Hi I have added the main menu to the footer and the following code as per the forum to the style.css

    .menu-footer ul li
    {
    display: inline-block;
    }

    but it doesn't change anything. Would someone explain to me what I am missing. I am new to coding and wordpress

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    If your theme doesn't already have a footer, the CSS code that you posted will not add one, it only styles any existing menu which has a class of menu-footer. And you can't assume that the CSS that works for someone else, who is probably using a different theme, will also work for your theme. You will have to go to the developer of your theme to find out how to add a footer.

  3. hmpk
    Member
    Posted 1 year ago #

    It does have a footer, but (only their advertising) and when I add my main menu as a footer1 in the widgets the menu comes out vertically. The Theme itself has a footer.php file but I can't work out to add the menu footer horizontally. I would appreciate you help

  4. CrouchingBruin
    Member
    Posted 1 year ago #

    It's always easier to provide assistance if you can post a link to your site so we can examine it directly.

  5. hmpk
    Member
    Posted 1 year ago #

    Thank you very much for your reply - however because I am new to this and have to make many many changes I only have it on localhost

  6. CrouchingBruin
    Member
    Posted 1 year ago #

    I'm afraid you will have to figure out your own solution, then. Because different theme developers can assign different IDs and classes to their web elements, it is impossible to make specific suggestions without examining the site or the changes you've made to the site. You can examine your site using a web debug tool like Firebug for Firefox or Chrome Developer Tools for Chrome. If you can get good at using these tools, and if you learn how CSS works, you should be able to figure out the right CSS to use.

  7. hmpk
    Member
    Posted 8 months ago #

    horizontal menu in footer

    I now have the site live and would like some help please to get the menu in the footer as a horizontal menu

    wangiworkerscc.com

  8. CrouchingBruin
    Member
    Posted 8 months ago #

    In an earlier message, you said:

    I add my main menu as a footer1 in the widgets the menu comes out vertically.

    but I don't see a vertical menu in the footer. Does the ExpoSure theme have a widget area in the footer? You also mentioned that you tried adding a widget area to footer.php. Were you not successful? Did you try adding a function call to dynamic_sidebar()?

  9. CrouchingBruin
    Member
    Posted 8 months ago #

    If you can get a menu widget into an existing sidebar, you can add some Javascript that moves the menu into the footer on page load. It's not very elegant, but it's relatively easy.

  10. hmpk
    Member
    Posted 8 months ago #

    Thank you for your replies. I don't want it in the sidebar, and when it did come out as a vertical footer I deleted it.

    There is a code somewhere that I should be able to add to get it to come out horizontally (IN THE FOOTER) but I don't know where it is or where to insert it

  11. CrouchingBruin
    Member
    Posted 8 months ago #

    If you can get even a vertical sidebar in the footer, then you all you need to do is add some CSS to make it horizontal. That's actually how it's done for menus which are in the header, because usually an unordered list (UL) is used for menus, and unordered lists are vertical by default. It's the CSS which turns the vertical list into a horizontal one.

    If you can get a vertical list in a sidebar:
    1) You can add some JavaScript that will move it into the footer, and
    2) You can add some CSS that will turn it into a horizontal menu instead of a vertical one.

  12. hmpk
    Member
    Posted 8 months ago #

    Hi I have sent this in before but I haven't received any assistance yet. Because I am new to this I would really like some assistance please.

    As you will see in the link the Menu in the footer for "Gallery" is supposed to be a drop down menu with Albums showing when the cursor is on it. (The same as the top menu).
    I have added the following code to the Widget Footer 1.

    I don't know what I have done wrong but the Drop down part is not working for Gallery (which I have left out because it wasn't working.
    The top menu drop down menu link has now dropped out I will have to fix that as well. It is supposed to be: Gallery/Albumns/August 2014.
    I am wondering why I don't seem to get any help when I send in my questions?

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background:#eeeee url('body-bg.jpg');
    }
    
    /*----- Menu Outline -----*/
    .menu-wrap {
        width:100%;
      }
    
    .clearfix:after {
        display:block;
        clear:both;
    }
    
    .menu {
        width:1000px;
        margin:0px auto;
    }
    
    .menu li {
        margin:0px;
        list-style:none;
        font-family:'Ek Mukta';
    }
    
    .menu a {
        transition:all linear 0.15s;
        color:#000000;
    }
    
     .menu li:hover > a, .menu .current-item > a {
        text-decoration:none;
        color:#blue;
    }
    
    .menu .arrow {
        font-size:11px;
        line-height:0%;
    }
    
    /*----- Top Level -----*/
    .menu > ul > li {
        float:left;
        display:inline-block;
        position:relative;
        font-size:12px;
    }
    
    .menu > ul > li:hover > a, .menu > ul > .current-item > a {
        background:#red;
    }
    
    .menu > ul > li > a {
        padding:5px 20px;
        display:inline-block;
        text-shadow:0px 1px 0px rgba(0,0,0,0.4);
    }
    
    /*----- Bottom Level -----*/
    .menu li:hover .sub-menu {
        z-index:1;
        opacity:1;
    }
    
    .sub-menu {
        width:160%;
        padding:5px 0px;
        position:absolute;
        top:100%;
        left:0px;
        z-index:-1;
        opacity:0;
        transition:opacity linear 0.15s;
        box-shadow:0px 2px 3px rgba(0,0,0,0.2);
        background:#2e2728;
    }
    
    .sub-menu li {
        display:block;
        font-size:12px;
    }
    
    .sub-menu li a {
        padding:5px 20px;
        display:block;
    }
    .sub-menu li a:hover, .sub-menu .current-item a {
        background:#3e3436;
    }
    
    </style>
    </head>
    
    <body>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
    
    <li><a href="?page_id=123">About the Club</a></li>
    <li><a href="?page_id=85"><span>Monthly Newsletter</span></a></li>
    <li><a href="?page_id=63"><span>Events</span></a></li>
    <li><a href="?page_id=306"><span>Competitions</span></a></li>
    <li><a href="?page_id=91"><span>Tutorials</span></a></li>
    <li><a href="?page_id=94"><span>Club Documents</span></a></li>
    <li><a href="?page_id=623"><span>Contact Us</span></a></li>
     <ul>
    <li><a href=""><span> Album </span></a>
    <li><a href="?page_id=754"> August 2014</a></li>
    </ul>
    </li>
    
    </ul>
    </div>
    </body>
    </html>

  13. hmpk
    Member
    Posted 8 months ago #

    After I inserted the above code - now my top menu won't through Gallery won't drop down. I followed the instructions previously given to me.

    Gallery/Albums/August 2014.

    It is supposed to have a drop down menu (both the same - Top Menu and footer Menu. Neither of them are working now. Please help

  14. CrouchingBruin
    Member
    Posted 8 months ago #

    I am wondering why I don't seem to get any help when I send in my questions?

    Well, technically, commercial themes are not supported in these forums, only themes from the WordPress Theme respository. You should be contacting Themeforest for support. Any support you get here should be considered a bonus. Plus we are all volunteers with other jobs, no one gets paid to answer questions on the forum, and you have to hope that someone who has the experience and expertise to answer your question will come across it. So if you need something answered urgently, then you should contact Themeforest because support is something which you paid for as part of the cost of the theme.

    I don't know who suggested that code above, but that is incorrect as far as the implementation goes. That is the code for a complete web page. You can't have multiple html and body tags inside the same page, so embedding that complete code in the middle of your page will probably cause problems. It's possibly interfering with some scripts which follow that section.

    I would try taking out the first three lines at the top:

    <!DOCTYPE html>
    <html>
    <head>

    take out these two lines in the middle:

    </head>
    
    <body>

    and remove these last two lines at the end:

    </body>
    </html>

Topic Closed

This topic has been closed to new replies.

About this Topic