CODEWITHSUNDEEP
cssheadernavigation
KhanLearner
KhanLearner

Reputation: 31

How can i insert a text beside the navigation at the header

Which code do i need to type to make a text or a logo on my header nav?

I want my text or logo on the right line with my navi just on the left site of the nav position.

nav {
  position: fixed;
  width: 98%;
  height: 50px;
  background-color: red;
  background-repeat: no-repeat;
  z-index: 99;
  text-align: center;
}
<header>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
  </nav>
</header>

Upvotes: 1

Views: 69

Answers (3)

hungerstar
hungerstar

Reputation: 21675

I took a few liberties with the layout, making a few assumptions about what you might have intended.

  • I applied the styles you had on <nav> to <header>, seemed to make more sense that way.
  • I used absolute positioning on the text/logo so that it would be taken out of the normal document flow and not affect the layout of other elements.

body {
  margin: 0;
}
header {
  position: relative;
  height: 50px;
  background-color: red;
  line-height: 50px;
  text-align: center;
}
h1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 0.5rem;
  font-size: 1.5rem;
}
nav > a {
  padding: 0 0.5rem;
}
<header>
  <h1>Khan Learner</h1>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>y Work</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
  </nav>
</header>

Upvotes: 0

Carle B. Navy
Carle B. Navy

Reputation: 1156

Try this:

nav{ 
  position: fixed;
  width: 98%;
  height: 50px;
  background-color: (red);
  background-repeat: no-repeat;
  z-index: 99;
  text-align: center;
}
span{
  display:block;
  float:right;
}
<header>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
    <span>Khan Portfolio</span>
  </nav>
</header>

Upvotes: 1

Dasar
Dasar

Reputation: 360

Your question is not clear but I think this is what you're looking for:

nav{ 
        display: inline-block;
        position: fixed;
        width: 98%;
        height: 50px;
        background-color: (red);
        background-repeat: no-repeat;
        z-index: 99;
        text-align: center;

}
<head>        
        <meta charset="utf-8">
        <meta name="description" content=" min portfolio ">
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <a id="logo" href="index.html"><strong>L</strong>ogo</a>
    <nav>
    
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
    </nav>
    
    
    
    </header>    
<style>

Upvotes: 1

Related Questions