CODEWITHSUNDEEP
htmlwordpresscsscss-selectors
Nadan Marenković
Nadan Marenković

Reputation: 153

wordpress generated css not being applied

I have a problem with wordpress generated HTML - i don't know how to target it with css. I created a footer menu in footer.php:

<?php
/* main footer file */
?>

<footer>
    <div id="oblaci"></div>
    <div class="footer-nav">
    <div id="footer-logo">
    <a href="#"><img src="<?php bloginfo('template_url') ?>/img/koprivko-
min.png"></a>
    </div>
    <?php wp_nav_menu( $arg = array(
            'menu_class'=> 'footer-nav',
            'theme_location' => 'footer'
        )); ?>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

and i'm trying to target ul(#menu-footer-nav) which is generated by wordpress element on the image below with css, and set the property:#menu-footer-nav{width:auto; height:auto; background:none}

It works on dev tools in chrome, but i cannot apply it. enter image description here

Upvotes: 0

Views: 47

Answers (3)

Tuhin
Tuhin

Reputation: 195

You're using wp_nav_menu() function, which will generate number of list items when fetching the specified menu. You can find more details in wordpress site.

Upvotes: 0

Johannes
Johannes

Reputation: 67738

You have to use a selector that has higher specifity than the selectors which are used by default. So, try this one:

footer div.menu-footer-nav-container > ul#menu-footer-nav.footer-nav { ... }

Be careful to write spaces and non-spaces exactly like this: It's the ul element having class .footer-nav and ID #menu-footer-nav, which is a direct child of the div with class .menu-footer-nav-container, which is inside (not necessarily a direct child) the footer element.

This combines everything I can see in your screenshot. If it still doesn't apply, add !important to the single settings, but I think you shouldn't need that.

Upvotes: 1

M. Ferguson
M. Ferguson

Reputation: 1421

If Wordpress is attaching an ID to the nav (as it has done), you can simply just target the id/class it supplies within your CSS. In this instance:

ul#menu-footer-nav {
    width:auto; 
    height:auto; 
    background:none;
}

Upvotes: 1

Related Questions