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

Positioning my logo inside the navigation bar using CSS – Photoshop

I can’t find some tutorials that will help me align the responsive navigation bar with the logo.

Sorry I’m just new in HTML & CSS and trying to create a website perhaps you can help me with me this by position it properly? and can you please provide also a link that will help me build a responsive website throughout my journey? thank you very much..

Here is the html:

<!DOCTYPE html>
<html>
<title>Office the Naval Adjutant</title>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<nav>
<ul>
    <li><img src="logoweb.png"></li>
    <li><a href='#'>ADMIN</a></li>
    <li><a href='#'>MILITARY ASSISTANCE</a></li>
    <li><a href='#'>RECORDS</a></li>
    <li><a href='#'>PUBLICATION</a></li>
    <li><a href='#'>GALLERY</a></li>
</ul>
</nav>
</body>
</html>

CSS:

#logo {
    position:absolute;
    left:0%;
}
* {
    padding: 0;
    margin: 0;
}
nav{
    background-color: #233647;
    text-align: right;
    padding: 20px;
}
nav li {
    display: inline-block;
    margin: 0 8px;
    padding-top: 1px;
}
nav li a{
    color: white;
    padding: 11px;
    text-decoration: none;
    font-family: arial;
}
nav li a:hover{
    background-color: white;
    color: #233647;
}

It looks like this:

enter image description here

But I wanted the output like this(I photoshoped it) which should be responsive:

enter image description here

Tags:

2

Answers


  1. 0

    Add this to your #logo and try, before that assign #logo to image. Reset height and width according to your logo size.

    #logo{
    position:absolute;
    top:10px; 
    left:10px;
    width:40px;
    height:40px;
    overflow:hidden;
}
<li>
<img src="https://source.unsplash.com/random" id="logo"></li>
<li>
    Login or Signup to reply.
  2. 0

    you can use bootstrap for making your website responsive, they have defined all classes you just have to use them.
    [bootstrap link with navbar as you need]

    [1]http://startbootstrap.com/template-overviews/freelancer/
    check it out..!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search