Issues with Text Alignment

[scjmoore]

Hello All,

I am looking for some assistance please with trying to position my navigation menu, I am still learning CSS and I have now a brick wall in trying to resolve this issue. As can been seen from the below image I am trying to line up the navigation onto the same level as the text logo.

My CSS and HTML code snippet is shown below

HTML:

  <header>
                <div class="header-overlay">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="logo">
                                    <h1>Piran Web</h1>
                                <div class="clearfix"></div>
                                                                                
                                   <ul class="main-nav">
                                       <li><a href="#">Services</a></li>
                                       <li><a href="#">About</a></li>
                                       <li><a href="#">Contact</a></li>
                                       <li><a href="#">Blog</a></li>
                                   </ul>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

CSS Code:

.main-nav {
   float: right;
    list-style: none;
    margin-top: 55px;
    
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    
}

.main-nav li a:link,
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #fff;
    
}

.logo h1{
	font-family: 'Inspiration', 'Lora', serif;
	font-size: 90px;
	color: #fff;
    display: inline-block;
}

.logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
}

[SamA74]

I’m guessing by the plethora of nested divs and their class names, this also has Bootstrap css applied. Correct?

[coothead]

Hi there scjmoore,

if, as @SamA74 has suggested, you’re using “Bootstrap”,
I would stronger suggest that you remove it and start again.

Not only does it hinder the learning of CSS, it also produces,
as pointed out, a plethora of unnecessary code bloat.

coothead

[Gandalf]

The class="clearfix" is almost certainly going to ensure that the menu appears below whatever comes before. What happens if you remove it?

[SamA74]

Here you see much simpler html and a layout that works.

[scjmoore]

Hi SamA74,

Yes I am using Bootstrap, should I not use it for the time being?

Joe

[scjmoore]

Hello gandal458, I removed the cleafix and all is ok now but I am going to remove bootstrap and learn with out it

[scjmoore]

Thanks SamA74, This is a lot neater.

Is it worth me still using the following vendor provided CSS instead of bootstrap?

normalize.css
grid.css

Joe

[SamA74]

The choice is yours.
Some choose to use Bootstrap, others choose to avoid it.
I can’t recommend any framework or vendor provided CSS because it’s not something I use. But maybe other will.