How come my menu is not showing up in the same format as the code?

I'm struggling to make the menu align with the text logo. Every time I try, the menu ends up below the logo instead of beside it. Can anyone provide some assistance?

nav{
    width: 1330px;
    margin: 0px auto;
}

nav ul li{
    text-transform: uppercase;
    display: inline-block;
    color: white;
    float: right;
    margin-right: 10px;
}
<nav>
          <ul>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Services</a></li>
            <li><a href="#">Request a Quote</a></li>
          </ul>

        </nav>

htmlcss

Answer №1

.header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     padding: 50px 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

 .header a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     text-decoration: none;
}
 .header a .logo {
     width: 50px;
     height: 50px;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     background-image: url(../res/imgs/logo.svg);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     margin-right: 20px;
}
 .header a .logo-text {
     font-size: 28px;
     color: #E9DFF7;
     font-weight: 800;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
}
 .header a .logo-text .logo-dot {
     width: 8px;
     height: 8px;
     background-color: #8E3BEB;
     border-radius: 100%;
     margin-left: 3px;
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
}
<div class="header"></div>

Answer №2

Perhaps you're seeking something along these lines

nav{
 width: 1330px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

nav ul li{
 text-transform: uppercase;
 display: inline-block;
 color: white;
 margin-right: 10px;
}

<nav>
 <span class="logo">Logo</span>
 <ul>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Request a Quote</a></li>
 </ul>
</nav>

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

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I'm attempting to arrange my boxes in a single line, with the ability to wrap and switch to column mode on smaller phone screens. Desired layout: Wins Losses Ties Points On shrinking screen: Wins Losses Ties Points Code ...

htmlangularflexboxangular-flex-layout

Transferring information from various HTML forms using JQuery's ajax functionality

Hello there! I have recently started learning how to use jQuery AJAX for file uploads. Currently, I am working with a simple HTML form and including JavaScript/jQuery code within it to make an AJAX request. <!DOCTYPE HTML> <html> <head> ...

phpjqueryhtmlajax

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

Utilize Vue.JS to showcase JSON information from an external file

Currently, I have a View.JS app that displays a conversation thread from a JSON file. The existing code appears as follows: const app = new Vue({ el: "#app", data: { messages:[ { name: "Support", message: "Hey! Welcome to suppo ...

javascripthtmljsonvue.jsvuejs2

Click here to get the button click link

Is there a method to obtain the link of a button click on a website? This is the Website and it features a play button. I am looking for a way to capture the link triggered by clicking the play button so that the audio starts playing automatically each t ...

javascriptphphtmlcssweb

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox. My question is: how can I have a lightbox configured so that only the trigger image is displ ...

javascripthtmlcsslightbox2

Is it possible to open one collapse item and simultaneously close all the others using Bootstrap 5?

Can someone explain how to properly use the Bootstrap 5 collapses component? I want it so that when one collapse item opens, all others close. The documentation mentions setting a parent attribute, but I'm not entirely sure how that works. Here's ...

htmltwitter-bootstrapbootstrap-5

Instructions on how to change database entries utilizing text input fields, enabling users to apply modifications by selecting the 'update' button

I'm a beginner when it comes to PHP and MySQL. Right now, I have a webpage with multiple text boxes that display data from my database. I am looking for guidance on how to update this data by allowing users to make changes in the textboxes and then cl ...

phphtmlajaxdatabase

Is there a way for me to replicate the reloading problem that occurs when a button is clicked within an HTML

Recently, I encountered a problem with our company's Web product where pressing a certain button resulted in the entire page being reloaded. This issue reminded me of a similar situation described on this website. Following the solution provided there ...

javascripthtml

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

Ending Current Tab using angularJS Controller

Is there a way to automatically close the current browser tab after a successful action in AngularJS? ...

angularjshtml

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

After creating a popup in my HTML page, when I click on the element that triggers it, the popup appears for a brief moment before automatically closing and causing my page to refresh. Below is the code I am using: HTML Code : <a class="lv-footer" id= ...

javascriptjqueryhtmlcsspopup

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

javascripthtmltagsescaping

Firebug displays the class name and location twice in the right panel

When examining a div labeled with .mlm-clearfix, I noticed that Firebug was displaying this class name and its URL twice in the right panel. The style declarations given for the Easy Clear Method in relation to this class are as follows: .mlm-clearfix:bef ...

htmlcssfirebug

Resizing images in HTML can sometimes lead to extra white space appearing underneath the

I am facing an unusual scaling issue with my website design. Whenever I resize the browser window horizontally, the image scales correctly, but it leaves a white space below it where the rest of the page should start from if the window is large. I'm ...

htmlcss

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

htmlcssposition

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui