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

html
themeforest

#1

Hi to all:

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

demo:

<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


#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?

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;

#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 as


#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: