CODEWITHSUNDEEP
htmlcss
Ramesh
Ramesh

Reputation: 3

The vertical line between the top navigation texts flickrs while hovering

While hovering the vertical line between the texts in the top navigation link, it keeps flickering & the CSS shows a referencing to a "hover" tag which is something that I'm not aware of.

Need help to stop that flickering behavior.

Site URL: http://www.catholic-collectibles.com/

Upvotes: 0

Views: 44

Answers (2)

Darren
Darren

Reputation: 13128

If I read your question correctly, the lines "move" because of the padding that is applied when a user invokes the :hover (Click the link to read more) css selector.

On line 122 of topNav.css you'll find this:

.navigation-container .top-cat:hover, .navigation-container .hover .top-cat {
    background: #f3f3f3;
    padding: 12px 12px 16px;
}

If you comment out that padding, the behavior will change.

Example:

.navigation-container .top-cat:hover, .navigation-container .hover .top-cat {
    background: #f3f3f3;
    /* padding: 12px 12px 16px; */
}

Upvotes: 2

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

Remove padding:

.navigation-container .top-cat:hover, .navigation-container .hover .top-cat{ padding:0;}

Upvotes: 0

Related Questions