CODEWITHSUNDEEP
css
Pushkar Gaikwad
Pushkar Gaikwad

Reputation: 155

Menu not aligning with an image/link (CSS issue)

I am building http://www.inboundio.com and though on my localhost and server, the site looks fine, I took certain screenshots with browsershots and criticue and they showed this as website screenshot https://i.sstatic.net/FOJRa.png (notice at top, about us being part of the image)

I am not sure why this is happening, the page is responsive and on my localhost and server, everything looks fine. Any idea how to fix this since there is certainly some css problem which I am able to see.

Menu Code

<div class="top-menu pull-right  home-menu" id="main-menu">
  <ul class="nav">
    <!-- li><a href="#features">Features</a></li -->
    <li><a href="/features">Features</a></li>
    <li><a href="/plans">Pricing</a></li>
    <li><a href="/demo">Demo</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</div>

CSS

body.frontend .header .top-menu {
margin-top: 5px;
padding: 5px 10px;
position: absolute;
left: 50%;
margin-left: 140px;
}

.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}

.pull-right {
float: right;
}

Upvotes: 0

Views: 81

Answers (2)

Jon P
Jon P

Reputation: 19772

Try adding some padding on the right your div if you don't want to move the sign in button to the list. USe the width of the button, plus a bit extra.

body.frontend .header .top-menu {
    left: 50%;
    margin-left: 140px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-right: 60px;
    padding-top: 5px;
    position: absolute;
}

Upvotes: 1

The Mechanic
The Mechanic

Reputation: 2329

Try this am debug it and i found this issue

see this fiddle

use this code instead of your 

<ul class="nav">
    <li><a href="/features">Features</a></li>
    <li><a href="/plans">Pricing</a></li>
    <li><a href="/demo">Demo</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a class="btn btn-success pull-right login-btn" href="/users/sign_in">Sign-in</a></li>
</ul>

and add this css to your style and it will work fine

.frontend .nav li a.btn{margin-top:0!important;}
.frontend .nav li{line-height: 30px!important;}

Upvotes: 1

Related Questions