problems unhiding Main Nav Menu at bottom of page

  • Hi,

    Twentsixteen serves HTML for Main Navigation at both “top” and “bottom” of page; but on wider screens its CSS prevents Main Nav display in the footer:

    @media screen and (min-width: 56.875em) {
  .dropdown-toggle,.main-navigation ul .dropdown-toggle.toggled-on,
  .menu-toggle,	.site-header .social-navigation,
  .site-footer .main-navigation {
    display: none;
  }
}

    If I copy all (it won’t work just for “.site-footer .main-navigation” – anyone?)the above to Child CSS and change “display:none” to “display:block” (or any option but none) Main Nav is displayed at both Top and Bottom of page.

    BUT:

    Now, instead of displaying a “down arrow” symbol next to any nav link that has drop-down sub-items,a horrible “symbol” is displayed (created by a 2nd down arrow overlaying the first but at an offset).

    Any idea how I can fix? Sorry I’m testing locally so I cant provide a link.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter wrigs1

    (@wrigs1)

    Should have spent more time checking. This displays the bottom main navigation fine:

    @media screen and (min-width: 56.875em) {
  .main-navigation ul .dropdown-toggle.toggled-on,
  .site-footer .main-navigation {
    display: block;
  }
}

    Thank you for posting this. As a beginner I found it very helpful. I think it provides a natural solution for anyone wanting a menu bar in the footer and I can’t think why the authors of TwentySixteen didn’t include it as an option rather than having to insert code into a css child.

    I tried, without success, to find the point to which your code refers in the TwentySixteen theme. I would be interested to know whereabouts it is so I can understand better what I’m doing.

    There is a slight glitch in that showing the menu displaces slightly the placement of the ‘Proudly Powered by WordPress’line which follows. Did you encounter this and if so how did you rectify this?

    Nevertheless, despite this slight glitch, your code provides a more elegant solution than any of the others I’ve encountered, so far, when trying to place a menu bar in the footer.

    Thanks for your help.

    Thread Starter wrigs1

    (@wrigs1)

    Glad you found this useful.

    The entry in theme’s style.css starts about line 3047. My first post only showed the relevant style in the media query block (min-width 56.875) and removed CR/white space.

    Yes, if you show footer menu then the “line” following appears too close and to right of menu” (both part of the same “footer” container).

    As I was creating a modified child footer.php my solution was to edit footer.php and move line 15(? starts with “<footer” to before div site-info (line 40?)

    It works for me, you can also put the “line/s” following Nav Bar in a div and apply your own styles.

    N.B. I suggest you delete the “Powered by WordPress” bit from your footer.php to help prevent comment spam.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘problems unhiding Main Nav Menu at bottom of page’ is closed to new replies.

Tags