CODEWITHSUNDEEP
css
turtile
turtile

Reputation: 55

CSS Properties won't render

my CSS properties won't render. Fonts, widths etc. do nothing and I have no idea why. I've tried multiple things.

I'd like to have a percentage width for the nav and the logo but all render 100% width. It seems like I have a huge misunderstanding on how CSS works but after I read, I still don't get it. I have normalize.css added in Wordpress too.

If I add and span class around the text, it will change the text but it doesn't help with the issue of element size.

My Code:

*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

a {
    text-decoration:none;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size:100%;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Rhodium Libre', serif;
}

header {
    position:fixed;
    top:0px;
    width:100%;
    background-color:#000;
    opacity:0.9;
    z-index:10000;
}

//desktop

/*logo*/


.logo-holder {
    position:relative;
    float:left;
    display:inline-block;
    font-family: 'Rhodium Libre', serif;
    font-size:2.4em;
    background-color:white;
    width:200px;
}

    /* nav */
    
 .nav-holder {
     position:relative;
     float:right;
        width:500px;
    }
nav {
}

/*nav design*/

nav ul {
    display:inline;
}

nav ul li {
    position:relative;
    display:inline-block;
    cursor:pointer;
    padding-top:4px;
    padding-bottom:4px;
    font-family:'Rhodium Libre', serif;
    font-size:1.35em;
}

nav ul li:hover, nav ul li:active {
    background:transparent;
    color:#5F8E14;
}
    
nav ul li a {
    padding-left:0.5em;
    color:#FFF;
}

nav ul li a:hover, nav ul li a:active {
    color:#5F8E14;
}

//sub menu

nav.sub {

}

nav.sub ul {
    display:inline;
}

nav.sub ul li {
    position:relative;
    display:inline-block;
    cursor:pointer;
    padding-top:2px;
    padding-bottom:2px;
    font-family:'Rhodium Libre', serif;
    font-size:1.1em;
}

nav.sub ul li:hover, nav.sub ul li:active {
    background:transparent;
    color:transparent;
}

nav.sub a:hover, nav.sub ul li a:active {
    text-decoration: underline;
}
<body>
    <!-- header -->
    <header>
        <div class=logo-holder">
            why is nothing changing here?
        </div>
                            
        <div class="nav-holder">
            <nav>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </nav>
                            
            <nav class="sub">
                <?php wp_nav_menu( array( 'theme_location' => 'sub-menu' ) ); ?>
            </nav>
        </div> <!--nav holder-->
    </header>
    <!-- /header -->
</body>

Thanks for any help!

Upvotes: 2

Views: 77

Answers (1)

jcaron
jcaron

Reputation: 17710

// does not make a valid comment in CSS. /* ... */ does.

Also, 

   <div class=logo-holder">

is obviously lacking a ".

Upvotes: 2

Related Questions