Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website.

If you would like to take a look, here is the link to my jsfiddle page.

Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it's not working as expected. The image is appearing at the bottom and the height of the grey area needs to be adjusted for a more polished look.

I've shared my HTML and CSS below:

<div class="topnav">
  <ul>
    <li class="home">
      <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
    </li>
    <li class="dropdown">
      <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">               
          <li><a href="#"><i>INDIVIDUAL</i></a></li>
          <li><a href="#"><i>CORPORATE</i></a></li>
        </ul>
    </li>
    <li class="our-story">OUR STORY</li>
    <li class="login-signup">Log In | Sign up</li>
    <li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
  </ul>
</div>

This is the CSS code I used:

li.insurance{
  margin-right: 60px;
}
li.home{
  margin-right: 60px !important;
  position: relative;
  top: 15px;
  left: 10px;
}
li.our-story{
  margin-right: 120px !important;
}
li.login-signup{
  margin-right: 20px !important;
  font-style: italic;
  font-family: fontawesome;
}
li.get-covered{
   border-color: #EF7440;
   border-style: solid;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 30px;
   padding-right: 30px;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 20p;
  padding-bottom: 40px;
  background-color: rgba(0, 0, 0, 0.5);
}
li.home{
  margin-right:35px;
}
li{
  display: inline;
}
.topnav{
  overflow: hidden;
}
.topnav ul > li{
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}
.topnav a{
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
  display: none;
  margin-top: 14px;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
}
.topnav ul > li > ul > li{
  float: left;
  clear: left;
  display: block;
  text-align: left;
}

Can anyone offer insights into what might be going wrong here?

javascriptjqueryhtmlcss

Answer №1

It seems like there are some issues with the current setup, but I believe you may be searching for something similar to this:

https://jsfiddle.net/3kw1uLrs/35/

I made some modifications to the code and removed the styling for the ul element. Instead, I applied a background color to the topnav element. You can use this as a starting point for further development.

.topnav {
  background:rgba(0, 0, 0, 0.5);    
  padding:0 15px;
}
.logo {
  float:left;
  margin-top:15px;
}
.nav-left {
  float:left;  
}
.nav-right {
  float:right;
}

Additionally, I moved the logo outside of the list and placed it within an anchor element - this will likely be useful for linking back to your homepage:

 <a class="logo">
   <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
 </a>

Here are some tips:

  • Avoid nesting everything under a single ul element.
    I separated the logo from the rest of the content, creating two separate lists for better organization.
  • Avoid using margins for positioning elements.
    Utilize floats, text-centering, or other methods for proper alignment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the best way to pass multiple input data using Ajax and jQuery

I'm encountering an issue while attempting to pass multiple input values through Ajax with jQuery, as it seems to not be functioning correctly. For instance: <input type="text" class="form-control invoice_item_name" name=" ...

phpjqueryajax

An error has been caught in the Angular JS application while using the highcharts-ng module: [$injector:modulerr]

I'm encountering an issue while trying to integrate Highcharts into my Angular/Node/Express application. I am utilizing the highcharts-ng directive available at https://github.com/pablojim/highcharts-ng Every time I run my app, I consistently receive ...

javascriptangularjsnode.jshighchartshighcharts-ng

An issue with importing chatgpt: ES Module require() not functioning as expected

I am facing an issue when trying to require the chatgpt package in my code. Despite having installed node fetch versions 2.6.6 and 2.7.1, the package is still throwing errors. Additionally, I have updated my package.json file with "type": "m ...

javascriptnode.jsdiscord.js

How can you use jQuery to display an image when hovering over text?

Looking for a tutorial or script that displays an image when hovering over HTML text with the mouse? ...

javascriptjqueryhtml

Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...

htmlcss

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

I've been working on developing a new forum using Express and React, but I'm facing challenges with saving form data to the database. Currently, my goal is to store topic titles in a MongoDB collection, with plans to expand to include message con ...

javascriptreactjsexpress

Updating comment content using Ajax

I am in the process of using Ajax to insert my comment content. However, I seem to be facing some issues with the comment_add.php page. I was hoping someone could review it for me. While I have successfully obtained the streamid as checked in firebug, no ...

phpjavascriptjqueryhtmlajax

How can we translate this php json_encode function into Node.js?

Seeking the equivalent Node.js code for this PHP Script: $SMA_APICall = "https://www.alphavantage.co/query?function=SMA&symbol=".$symbolValue."&interval=15min&time_period=10&series_type=close&apikey=R3MGTYHWHQ2LXMRS"; $SMAres ...

javascriptphpnode.js

Using numerous textures for a single mesh in THREE.js

I am working with an OBJ file that utilizes four textures. The UV coordinates in the file range from (0, 0) to (2, 2), where (0.5, 0.5) corresponds to a coordinate in the first texture, (0.5, 1.5) is a UV coordinate in the second texture, (1.5, 0.5) repres ...

javascript3dthree.jstexturesuv-mapping

Ways to access the attribute of the element being hovered over

So, I am currently attaching event listeners to an array of elements with the intention that when a specific element is hovered over, it will set a property to the id of that element. However, instead of grabbing the id of the hovered element, it seems to ...

javascriptvue.js

Sending Dual Parameters to PHP File Using AJAX

Currently, I am facing an issue where I can successfully pass one value to a Bootstrap modal via AJAX, but my code stops working when I try to pass a second value. JavaScript function claimOrder(str, stre){ if (str=="") { document.getElementById("txtH"). ...

javascriptphpajax

What is a PHP self-generating variable?

Is it possible to use a form variable as its own URL? It may be difficult to explain, but here's an example: matchmaking.php: $search_summoner = $_POST['search_summoner']; echo '<form method="post" action="matchmaking.php?searc ...

phphtmlforms

Make sure PTable maintains a horizontal layout on any device with PrimeNG

When I view my Ptable on desktop or iPad, it looks like this: https://i.stack.imgur.com/ONqZV.png However, when I switch to a device like an iPhone X, it changes to this layout: https://i.stack.imgur.com/H2q7j.png I want the horizontal layout to displa ...

cssangularresponsiveprimeng

Typescript - Error in Parsing: Expecting an expression

I am currently working with Vue and TypeScript and have encountered a problem. How can I resolve it? Here is the code snippet in question: private setTitle(systemConfig: any) { const systemConfigParse; let obj; systemConfigParse = JSON.parse(sy ...

javascripttypescript

Converting a Class Component to a Functional Component in React: A Step-by-Step

I need to refactor this class-based component into a functional component class Main extends Components{ constructor(){ super() this.state = { posts:[ { id:"0", description:"abc", imageLink: ...

javascriptreactjs

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

pythoncssregexcommentstext-processing

`Inability to remove item from array in Vue.js`

I've been struggling to understand why this feature isn't functioning as expected. I'm using sample code for reference, but it's not behaving the same way. When I click on the delete button, nothing happens even though it should remove ...

javascriptarraysvue.jsvue-component

Getting php variables into html

I have coded the following PHP script: <?php $str = time().'_'.$_FILES["file1"]["name"]; $fileName = $_FILES["file1"]["name"]; $fileTmpLoc = $_FILES["file1"]["tmp_name"]; $fileType = $_FILES["file1"]["type"]; $fileSize = $_FILES["file1"][ ...

phphtmlsession-variables

Launching a Node.js command-line interface to NPM, developed using TypeScript

I'm struggling with deploying my Node CLI tool to NPM. During development and testing, everything works fine. I can even use `npm link` on the repo without any issues. After successfully publishing and downloading the package, the application crashes ...

javascriptnode.jstypescriptnpm

What is the best way for the parent component to initiate an http call, update its state, and then distribute that state to all child components

Recently, I encountered an issue while trying to call axios.get('{link here}') from the componentDidMount() method of the parent component: class Parent extends React.Component { constructor(){ super(); this.state = { stuff: [] } ...

javascriptjsonreactjsaxios