CODEWITHSUNDEEP
css
Hannah
Hannah

Reputation: 19

CSS selectors on custom navigation

the context: I am working on a project that requires coding a custom Tumblr theme using HTML, CSS, and JQuery. The website I'm building out features a "newsfeed" of auto-generated content pulled in and auto-posted to Tumblr by IFTT sequences I have monitoring RSS and Social Feeds. The backend program automatically tags posts by source type, so I have set up redirect pages in my theme's navigation that navigate to the content tagged by each source type. I want to set css selectors to style hover and active navigation links, and have followed the LVHA rule and tried specifying by class and id, but can't get it to work. I want the hover and active navigation categories to be set to bold, instead of italic (link and visited setting).

the ask: Taking a peek at my code for the a.nav1 links, how can I set the css :active and css:hover to text-decoration: bold?

Thanks so much!! Any pointers are appreciated. Hannah

My current code is: 

a.nav1:link {
            color: black;
            margin: auto;
            width: 130%;
            margin-bottom: 0px;
            padding-bottom: 0px;

            font-style: italic;
                -webkit-transition: all 1s ease-out;
                -moz-transition: all 1s ease-out;
                -o-transition: all 1s ease-out;
                -ms-transition: all 1s ease-out;
                transition: all 1s ease-out;
        }

      a.nav1:visited {
            color: black;
            margin: auto;
            width: 130%;
            margin-bottom: 0px;
            padding-bottom: 0px;

            font-style: italic;
                -webkit-transition: all 1s ease-out;
                -moz-transition: all 1s ease-out;
                -o-transition: all 1s ease-out;
                -ms-transition: all 1s ease-out;
                transition: all 1s ease-out;
        }

        a.nav1:hover {
            color: black;
            margin: auto;
            width: 130%;
            margin-bottom: 0px;
            padding-bottom: 0px;

            font-style: bold;
                -webkit-transition: all 1s ease-out;
                -moz-transition: all 1s ease-out;
                -o-transition: all 1s ease-out;
                -ms-transition: all 1s ease-out;
                transition: all 1s ease-out;
        }

        a.nav1:active {
            color: black;
            margin: auto;
            width: 130%;
            margin-bottom: 0px;
            padding-bottom: 0px;

            font-style: bold;
                -webkit-transition: all 1s ease-out;
                -moz-transition: all 1s ease-out;
                -o-transition: all 1s ease-out;
                -ms-transition: all 1s ease-out;
                transition: all 1s ease-out;
        }

Upvotes: 1

Views: 68

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

You can't add boldness to elements using font-style. You will have to use the font-weight property instead.

Change this:

font-style: bold;

To this:

font-weight: bold;

Upvotes: 3

Related Questions