Overriding Foundation Default Nav Styles

HTML & CSS
1

Well the ‘old dog’ is trying to learn some new tricks and man oh MAN am I frustrated.

I just started learning Foundation and after going through all the tutorials I am attempting my first layout. I am trying to do a top nav and even though I am following the code in a tutorial I can not seem to override the default background on the inner ul. Here’s the html:

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <title>Web Application &amp; Database Development, Responsive Website Design, Website &amp; Interface Design and Programming</title>
        <link rel='stylesheet' href='/styles/foundation.css' />
        <link rel='stylesheet' href='/styles/styles.css'>
        <script src='/scripts/vendor/modernizr.js'></script>
    </head>
    <body>

        <div class='fixed'>
            <nav class='top-bar' data-topbar role='navigation'>

                <ul class='title-area'>
                    <li class='name'></li>
                    <li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
                </ul>

                <section class='top-bar-section'>

                    <ul class='left'>
                        <li><a href='/'>Home</a></li>
                        <li class='has-dropdown'>
                            <a href='#'>Programing</a>
                            <ul class='dropdown'>
                                <li><a href='#'>PHP</a></li>
                                <li><a href='#'>Javascript</a></li>
                                <li><a href='#'>SQL</a></li>
                            </ul>
                        </li>
                        <li><a href='#'>Responsive Web Design</a></li>
                        <li><a href='#'>Database Design</a></li>
                        <li><a href='#'>Portfolio</a></li>
                        <li><a href='#'>Bio</a></li>
                        <li><a href='#'>Contact</a></li>
                    </ul>

                    <ul class='right'></ul>

                </section>
            </nav>
        </div>

        <script src='/scripts/jquery-1.11.3.min.js'></script>
        <script src='/scripts/foundation.min.js'></script>
        <script>
          $(document).foundation();
        </script>
    </body>
</html>

And here is the beginning of the styles.css CSS:

body    {
    background-color: #FFF;
    }

.top-bar {
    background: none;
    background-image: url('/images/uppper-nav-bg.png');
    height: 64px;
    line-height: 64px;
    margin-bottom: 0;
    }

.top-bar-section ul {
    background: none;
    text-transform: uppercase;
    }

.top-bar-section li a:not(.button) {
    background: none;
    line-height: 64px;
    padding: 0 27px;
    color: #c0c0c0;
    }

.top-bar-section ul li.active > a {

    }

.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
    }

The text-transform for .top-bar-section ul is not working and even when I tried to change the background color of it to red the black background stays black and when resizing the browser window the red shows up behind it. I also tried setting the background color of the anchors to red and again no joy.

I’ve validated everything, tried a million things and I’m ready to jump out the window!

2

The text-transform needs to be applied to the element that actually holds the text. Aka the anchors. That’s why it doesn’t owrk.

You can set the background-color for .top-bar and it will take effect. I’m not sure what end look you are going for. You can do something like this for .top-bar for the background color:

.top-bar {
    background: red url('/images/uppper-nav-bg.png');
    height: 64px;
    line-height: 64px;
    margin-bottom: 0;
    }
3

So much for that tutorial huh?

Any way the text-transform now works but I still have the default black background on the menu items

4

Did you update your code like I changed in post #2? I see the background image and a red background. Do you see that as well?

5

Yes I did and it still shows a black background on the menu items but here’s something interesting.
When I shrink the browser down to mobile size I see part of the red under the black menu bar and then when I click the menu icon the menu items appear, in red.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.