How make center text with image line hover (ul li)?

Envato Authors Theme Authors
,
1

Hi to all:

My image hover is bad not center image with text please help me fix my css thanks.

demo:

image

image

<header class="header-top">
	<div class="navbar navbar-default navbar-top-fixed" id="navbar" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#home-slider"><img src="img/logo.png" class="logo" alt="logo"></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#home-slider">Home</a></li>
					<li><a href="#about-section">About</a></li>
					<li><a href="#gallery-section">Gallery</a></li>
					<li><a href="#team-section">Team</a></li>
					<li><a href="#reservation-section">Reservation</a></li>
					<li><a href="#menu-section">Menu</a></li>
					<li><a href="#contact-section">Contact</a></li>
				</ul>
			</div>
		</div>
    </div>
</header>

and css

   .navbar-default .navbar-nav > li > a {
color: #0785dd;
margin: 0 2px;
text-transform: uppercase;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
position: relative;
display:block;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
 width: 29px;
height: 30px;
background: url('img/lineHover.png') no-repeat;
position:relative; 
}

Please help me thanks

2

please help me now because I need urgent follow make my html thanks.

3

Add your code to http://codepen.io/pen/ and share the link so we can see the issue and suggest a fix

2 Likes
4

It’s need register account?

5

http://codepen.io/JeriTeam/pen/jVomMj not center line hover css menu :’(

6

please help meeeeeeeee

7

are you trying to make the line in the center?

like this?

image

That doesn’t look very good.

But if that is what you are trying to achieve you just need to remove the below width, height, margin css rules and add the center option after that no-repeat for the background image

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
     width: 29px;
    height: 30px;
    background: url('http://foodrich.erikaivo.cl/images1/lineHover.png') no-repeat;
    margin: 0 auto;
1 Like
8

Yes center but I don’t idea code but thanks for your help me but problem I not have a idea code center like asimage

9

Please help me I need give me a code css thanks

10

it’s not working code my css :frowning:, please help me urgent

11

I’m sorry this is quite simple CSS changes. There are 3 lines to remove and 1 to change, as mentioned above. Maybe try hiring a web developer on studio.envato.com if it’s urgent. I’m on my phone now and cannot assist further. I’m still unsure what you’re trying to achieve with the layout. Best to provide a screenshot of what you’re trying to build

12

Many thanks. happy chirstmas :slight_smile:

13

I could help you on this (paid support) if you’re interested in
Please, contact me via the link below:

1 Like