• Resolved Robert

    (@robbieb1953)


    I’ve created a menu in my footer, but I want to style it exactly like my menu in the header:
    http://bit.ly/13Yw6Ap

    I would like it to appear horizontal, with the same font color and spacing – and the same color background (as the header menu). So far unable to do this…

    Thanks!

Viewing 15 replies - 1 through 15 (of 16 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What’s stopping to achieve this?

    Thread Starter Robert

    (@robbieb1953)

    In Firebug, I can’t identify the css to include. I have tried many variations, but no go

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    For example, what CSS didn’t work to colour the links white?

    Can you link the site in question? Or does that site have both the header and footer?

    Thread Starter Robert

    (@robbieb1953)

    The site is in the post above. I have these rules already, but I don’t know how to apply them to the menu:

    .site-footer {
    background: #318ce7;
    }
    .site-info {
    font-size: 1.2rem;
    color: white;
    margin: 0 auto;
    max-width: 920px;
    padding: 1.5em;
    text-align: center;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Something’s wrong with your website, I can’t right click. Are you aware of this bug?

    Thread Starter Robert

    (@robbieb1953)

    It’s the do not copy plugin. I’ll turn it off. I deleted the plugin, but there must be some remnant files. I’ll look in the folder…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    BTW when you had the plugin activated I pressed “Save page as” from an option default to my browser [screenshot] and was given all of the files [screenshot].

    Thread Starter Robert

    (@robbieb1953)

    Not a very effective plugin… I’ll mention this to the developers, thanks.

    It looks like the “.site-footer” class only affects the area where your copyright is. I would look for a “#footermenu” id in your CSS. Is it the Simple Share Buttons Adder plugin? You may have to check the stylesheet in the plugin directory on your site “/wp-content/plugins/simple-share-buttons-adder/css/page-style.css” to find where the color was set for the “#footermenu”.

    Looking at your code, I would probably do something like this to make them horizontal:

    #footermenu ul li {
    float: left;
    margin-right: 10px;
    }

    This will place all your list items in the “footermenu” div next to each other. To change the spacing between them, modify the “margin-right” attribute.

    Thread Starter Robert

    (@robbieb1953)

    Thanks dailyinvention. They’re horizontal… Not sure how to duplicate the dropdown, like in the header view. Also the addresses show when hovering…
    I tried to insert the css from the header menu configuration but got a star formation of the pages.
    Not sure what the relevance of the Simple Share buttons to the footer. (yes it is a plug in)

    Yeah, something is definitely funky with that plugin or theme. You could do something like this:

    .sub-menu {
    display: none;
    }

    Although, I don’t know if that’s how the mouseovers are handle hiding and displaying. It may just permanently hide the sub-menu. I had trouble finding any javascript that shows and hides them.

    What is the name of the plugin that is giving you headaches? Is it the Simple Share Buttons Adder?

    Thread Starter Robert

    (@robbieb1953)

    The only issue with the plugin was a collateral one, finding out that the do not copy function is not that effective. I don’t think it is interfering. I never had the simply shared buttons in the footer.

    The chronology of events is:
    I amended the footer.php file to be able to add the copyright info

    Then I changed the footer background color and text color with csss

    Then I added code to create the menu in the footer – I’m not very knowledgeable with php or css and I may have the code on the wrong line so that the two sections are not combined – or maybe I have to style them separately…

    Can some of the code from the header menu be employed in the footer? or the css from there?

    Thanks!

    You could place the #footermenu div inside the .site-footer div and it should that same background color, I think. Or just take everything from between the footermenu div and stick it in the site-footer. It looks like the black is actually the background color of the body tag. If you change the id from #footermenu to .main-navigation class, it may work for you.

    I found the stylesheet I was looking for. You have it imported in your main stylesheet.

    Thread Starter Robert

    (@robbieb1953)

    Between the footermenu div and ……?

    I’ll play with it.

    thanks for following up!

Viewing 15 replies - 1 through 15 (of 16 total)

The topic ‘Horizontal Menu in Footer’ is closed to new replies.