Photoshop Question posted in
The official user guide can be found here.

How to center a logo image inside a header – Photoshop

I would like a logo to appaear in the center of the navigation bar. At the moment i’ve made it really small just to ensure I can see it for now but will sort the size out afterwards.

Here is a photoshop design of how I want it to look:
https://gyazo.com/c1b0d25c4fe94a33edf3937576324229

Here is how it looks currently:
https://gyazo.com/4432c9c4874a082a9c4a4c5eb6d7af12

Any help would be greatly appreciated.

HTML:

<body id="chesters">

    <header>
        <nav>
            <ul>
            <li><a href="Menu.html">Menu</a></li>
            <li><a href="Burritos.html">Burritos</a></li>
                <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
            <li><a href="Contact.html">Contact Us</a></li>
            <li><a href="About.html">About Us</a></li>   
            </ul>
        </nav>
    </header>

<div id="Page">



</div> <!-- Page -->

</body>

CSS:

    body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0px;
    padding: 0px;
}

#Page {
    padding-top: 100px;
}


header {
    background-color: #1c1c1b;
    font-family: 'Century gothic';
    font-size: 180%;
    height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

.header-image {
    /*width: 100px;
    height: 400px;*/
    align-content: center;
    margin-top: -30px;
}


#center-column {
    background-color: white;
    width: 1080px;
    height: 100%;
    box-shadow: 0px 1px 5px #888888;
    margin: 0 auto;
    padding-bottom: 10px;
}

nav {

}

nav ul {
    text-align: center;
    display: table;
}

nav li {
    display: table-cell;
    vertical-align: middle;
    /*display: inline;*/
    padding: 0 10px;
}

nav li a {
    color: #009641;
    text-decoration: none;
}

nav li a:hover {
    color: #e2030e;
}
Tags:

3

Answers


  1. 0

    Good morning!

    Usually you want to control the nav ul and nav ul li elements appearance together without using floats and heavy padding. take a look at my revisions here. For the logo, you can just put it into an li element:

    body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0px;
    padding: 0px;
}

#Page {
    padding-top: 100px;
}


header {
    background-color: #1c1c1b;
    font-family: 'Century gothic';
    font-size: 180%;
    height: 140px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
}

nav {
}
nav ul{
	text-align: center;
	display: table;
	}

nav li {
    display: table-cell;
	vertical-align: middle;
	padding: 0 10px;
}

nav li a {
    color: #009641;
    text-decoration: none;
}

nav li a:hover {
    color: #FFF;
}
    <body id="chesters">

    <header>
        <nav>
            <ul>
            <li><a href="Menu.html">Menu</a></li>
            <li><a href="Burritos.html">Burritos</a></li>
			  <li><img class="header-image" src="chesters.png"></li>
            <li><a href="Contact.html">Contact Us</a></li>
            <li><a href="About.html">About Us</a></li>   
            </ul>
        </nav>
    </header>

<div id="Page">



</div> <!-- Page -->

</body>

    Try this revision.

    Login or Signup to reply.
  2. 0

    Add this to your CSS:

    nav ul {
  text-align: center;
}

    The li elements shouldn’t be affected but the image will be centered.

    Login or Signup to reply.
  3. 0

    Add container class before nav and set max-width and margin: 0 auto

     <body>
        <header>
            <div class="container">
                <nav>
                    <ul>
                        <li><a href="Menu.html">Menu</a></li>
                        <li><a href="Burritos.html">Takeaway Burritos</a></li>
                        <li><img class="header-image" src="assets/Headerlogo1.png"></li>
                        <li><a href="Contact.html">Contact Us</a></li>
                        <li><a href="About.html">About Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div id="Page">
        </div>
        <!-- Page -->
    </body>

      body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0px;
    padding: 0px;
}

#Page {
    padding-top: 100px;
}

header {
    background-color: #1c1c1b;
    font-family: 'Century gothic';
    font-size: 180%;
    height: 140px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
}

.container {
    max-width: 1282px;
    margin: 0 auto;
}

nav {}

nav ul {
    text-align: center;
    display: table;
}

nav li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

nav li a {
    color: #009641;
    text-decoration: none;
    padding-right: 20px;
}

nav li a:hover {
    color: #FFF;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search