creating css for footer nav menu

[janburg]

I want to have a menu in the footer, that has different font sizing than the main menu. I've created the CSS ".genesis-nav-footer-menu {
clear: both;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
width: 100%;
}"
in style.css, and added " '.nav-footer-header', " to the functions.php page, line 77 under "'menuClasses' => array(
'combine' => array(
'.nav-primary',
'.nav-header',". I'm using the Frameworks Sample as my child theme.

This is not working, so I'm obviously missing a connection between what I want and what I did. Any help out there for someone who can do CSS but not PHP? Thanks in advance!

http://radicalurge.com/

[Victor Font]

You don't have these classes in the footer nav menu. Use your browser's inspect tool so you can see the classes that are assigned to nav-secondary. https://victorfont.com/how-to-use-your-browsers-inspect-tool/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[janburg]

Thanks for the link to your blog post. But that doesn't really help me understand what I am missing in my current set up. Are you saying I need to add this css in the .nav-secondary area instead of creating a .genesis-nav-footer-menu item?

[Victor Font]

Right click on the footer menu and open your browser's inspect tool. You can examine the source code. This is the actual code from your footer:

<footer class="site-footer" itemscope="" itemtype="https://schema.org/WPFooter">
    <div class="wrap">
        <nav class="nav-secondary" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
            <div class="wrap">
                <ul id="menu-footer-menu" class="menu genesis-nav-menu menu-secondary js-superfish sf-js-enabled sf-arrows" style="touch-action: pan-y;">
                    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">
                        <a href="http://radicalurge.com/privacy-policy" itemprop="url"><span itemprop="name">Privacy Policy</span></a>
                    </li>
                    <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85">
                        <a href="http://radicalurge.com/shipping-returns" itemprop="url"><span itemprop="name">Shipping & Returns</span></a>
                    </li>
                </ul>
            </div>
        </nav>
        <p></p>
    </div>
</footer>

You are not using the classes you created anywhere in this code. You are displaying the secondary nav menu in the footer. You have to apply your CSS to the secondary nav menu.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[janburg]

Thank you for showing me what I have. Now what I need is a clue as to how to get this to work. Is that thru the footer or functions.php file? How exactly do I connect the code I have to the secondary nav menu?

[Victor Font]

Change the class names in style.css to match the menu classes.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[janburg]

Ok, let's start again. I want my secondary menu to have different font styling than the main menu. How do I connect my styling to the secondary nav? Right now the style is being overwritten by the .genesis-nav-menu styling, which I don't want to change as this is what the main menu is set up for. I need TWO separate menu stylings.

To my poor confused brain, it would seem that there's someplace within Genesis that points the secondary nav to the main nav settings - is this in the php? How do I separate the two menus?

[Author]

Posts