• Resolved anonymized-14293447

    (@anonymized-14293447)


    As this image illustrates, my previous theme put the copyright note on the left, and menus were floating from right as I created them. On my new theme the copyright was in the center and menus on another row above that. So I created it as a text menu, but together with the other menus they are obviosuly all centered.
    How can I modify the grid, in order to split them as in the first example?

    • This topic was modified 4 years, 9 months ago by Jan Dembowski.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    Hiya arsenalemusica,

    We’d need a link to a page with the header you want to modify in order to give specific advice. I assume these are in their own HTML containers with class or ID attributes we can use to target them with CSS selectors. Generally speaking floating each left or right will accomplish what you want. The containers’ total widths need to all fit within the footer container’s available width. This can be accomplished with percentage widths.

    A generic example, assuming certain class attributes:

    .copyright {
      width: 40%;
      float: left;
    }
    .menu {
      width: 60%;
      float: right;
    }
    Thread Starter anonymized-14293447

    (@anonymized-14293447)

    Pardon me, you can view the footer for instance on this page (use .com for viewing the old site’s footer). I had thought of floating but elements don’t move as I wish. In a way, instead of floating, I would need something that widens the gap between the 2 blocks (copyright + menus)

    Moderator bcworkz

    (@bcworkz)

    Including the copyright portion in the menu makes accomplishing what you want a bit tricky. It’d be a lot easier if the copyright portion were a separate element outside of the menu <ul> structure. Such an arrangement can still be accomplished through the “wp_nav_menu” filter, but then the copyright would not be manageable from the back end menus screen.

    The latest copyright year could be PHP coded to always reflect the current year so regular maintenance is not required.

    If the HTML needs to stay as it is, you could simply widen the right margin of the first menu item, but it’s not very good for responsiveness. Or you could float right all of the <li> elements. After that rule select only the first copyright element by ID and float it left

    Thread Starter anonymized-14293447

    (@anonymized-14293447)

    Maybe I’m doing wrong by adding menu links instead of tweaking the copyright footer itself. If you take a look at the theme’s demo, the footer is actually structured for copyright to be alone (and a menu section above it). So maybe I should include my extra links to the copyright sections instead?

    Moderator bcworkz

    (@bcworkz)

    Which ever solution that would be best for on going site maintenance would probably be best. It’s just that it’s more difficult to position individual menu items because they all fall under the same CSS selectors. Individual elements with their own unique CSS selectors are easier to position.

    Menus aren’t the only back end mechanism for use by end users. There are custom settings that can be added either to the admin menu and/or customizer. Doing so does involve custom coding so it’s not the best alternative for non-coders. A custom fields plugin helps a lot but will still involve some coding.

    Thread Starter anonymized-14293447

    (@anonymized-14293447)

    you could float right all of the

    • elements. After that rule select only the first copyright element by ID and float it left

    I have just added a class to the menu element that I wish to float left (menu-copyright), but it’s not separating from the right menu elements.

    .menu-li.menu-item-53052 {float:right;}
    .menu-li.menu-copyright {float:left;}

    but all menu elements are still grouped together

    Thread Starter anonymized-14293447

    (@anonymized-14293447)

    If anyone is still paying attention, I have found this tutorial but it doesn’t seem to work unless I change width to 1200px, and yet menus aren’t really aligned to the container margins.
    I have no clue how to solve this, but it’s possible with a few lines of code. Any tip?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘change footer-bottom’s columns span’ is closed to new replies.