Click here to Skip to main content
14,639,650 members
Rate this:
Please Sign up or sign in to vote.
See more:
I've been trying for 3 days but can't get this logo to be inline with my navigation list. I've thought about using bootstrap or templates but I want to do it from scratch so I can learn but can't find a solution.

I've tried looking at other projects, code pens, source codes but just can't seem to mimic what they do and have to finally ask for help.

A Pen by daplenrek[^]

What I have tried:

I've tried position, display, moved it outside list, created a div, nothing is working.
Posted
Updated 7-Sep-18 1:38am
v2
Comments
RedDk 6-Sep-18 20:56pm
   
How about using VisualStudio in Design Mode and just dragging and dropping whatever you're trying to triage where you think it needs to be intially in place?

The code gets generated. Seriously easy.
Richard Deeming 7-Sep-18 9:55am
   
And a seriously bad idea. Have you ever looked at the absolute mess that the Visual Studio designer generates? :)

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

If your not use bootstrap please use normal HTML div structure.

Here i added some new div structure without bootstrap

<header>
    <div class="container">
        <div class="clearfix">
            <div class="logo-div">
                <a href="#"><img alt="logo" class="image" src="https://via.placeholder.com/350x150"></a>
            </div>
            <div class="menu-div">
                <nav>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a class="active" href="#">Log in</a></li>
                        <li><a class="button" href="#">Sign up</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>


And i added and removed some css please use the full css below
/* top right bottom left*/

body {
    margin: 0;
    padding: 0;
    font-family: open sans; 
    background-image: linear-gradient(to bottom right, #FBFCFD, #E8EBF3);
        
}

header {
    padding: 25px;
}
    
nav { 
    margin: 0;
    padding: 0;
    text-align: center;
}

nav a {
    display: block;
    text-decoration: none;
    color: #6A6A6A; 
    padding: 0 25px 0 25px; 
}
    
nav a:hover {
    color: #6945FF; 
}


nav li { 
    font-size: 15px;
    display: inline-block; 
    list-style-type: none;
}

.image {
    position: relative;
    display: inline;
    height: 3rem;
}
    
.active {
    color: #6945FF; 
    text-decoration: bold; 
    font-weight: 600; 
}

.button {
    font-weight: 400; 
    color: white;
    padding: 7px 20px 7px 20px; 
    background: #6945FF; 
    border-color: transparent;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 5rem;
    transition: all 0.1s ease-in-out;
}
  
.button:hover {
    color: white;
    box-shadow: 2px 2px 2px #888888;
}


.hero {
    padding: 240px;
    text-align: center;
    font-size: 35px;
}

footer {
    padding: 30px;
    text-align: center;
    font-size: 35px;
}
   
.logo-div{
  float:left;
}
.menu-div{
  float:right;
}
.container{
  max-width:1140px;
   width:100%;
  margin:0 auto;
}
.clearfix{
  display:inline-block;
   width:100%;
}


If add the above HTML and css code means you will get the logo and menu in single line.In responsive view you need to reduce space for menu to keep in single line.In mobile view You need to add jquery for menu toggle.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100