Tips for aligning a title and an unordered list in the same row

https://i.sstatic.net/0Db7y.jpg

I have a portfolio as an h1 element and navigation links in an unordered list. How can I position these items exactly as indicated, inline with the portfolio title? Any assistance is appreciated.

  #navbar h3
    {
        color: gold;
        text-align: center;
        margin-top: 0;
    }
    #navbar ul li
    {
        list-style-type: none;
        padding: 20px;
        font-size: 20px;
        
        margin-right: 15px;
        border-radius: 15px;
    
        
    }
    #navbar ul li a
    {
        text-decoration: none;
        color: white;
    }
    #list
    {
        display: flex;
        flex-direction: row;
        float: left;
        
        justify-content: space-around;
    }
    <nav id="navbar" >
                    <h3>PORTFOLIO</h3>
                    <ul id="list">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SKILLS</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
    
                </nav>

htmlcss

Answer №1

To achieve the desired layout, you can utilize the flex property in CSS:

#navbar
{
   display: flex;
}
#navbar h3
    {
        display: flex;
        justify-content: center;
        flex-grow: 1;
    }
    #navbar ul li
    {
      display: flex;
        list-style-type: none;
        align-self: center;
        
        font-size: 20px;
        padding: 0 5px;
        
        border-radius: 15px;
    
        
    }
    #navbar ul li a
    {
        text-decoration: none;
        color: white;
    }
    #list
    {
        display: flex;
        flex-direction: row;
        float: left;
        
        justify-content: space-around;
    }
   <nav id="navbar" >
                    <h3>PORTFOLIO</h3>
                    <ul id="list">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SKILLS</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
    
                </nav>

Answer №2

#navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#navbar h3 {
display:flex;
justify-content:center;
  color: gold;
  text-align: center;
  margin-top: 0;
}
#navbar div,
h3,
ul {
  width: 33.33%;
}

#list {
  display: flex;
  justify-content: end;
}
#navbar ul li {
  list-style-type: none;
  font-size: 20px;
  margin-left: 35px;
}
#navbar ul li a {
  text-decoration: none;
  color: black;
}
 <nav id="navbar">
      <div></div>
      <h3>PORTFOLIO</h3>
      <ul id="list">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SKILLS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

To assist you with your task, I have included an additional empty div in your HTML code. Hopefully, this makes things a bit easier for you and helps resolve the issue.

Answer №3

Here's a solution that should help:

Note: Using flex box may not be the best approach in this scenario.

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

h3 {
  text-align: center;
}

ul {
  position: absolute ;
  top:0;
  right: 0;
  margin-right:40px;
  margin-top: 20px;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: #000;
}
<nav id="navbar" >
    <h3>PORTFOLIO</h3>
    <ul id="list">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SKILLS</a></li>
        <li><a href="#">CONTACT</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

Manipulating the "placeholder" attribute with Knockout.js and JSON data

Is it possible to use the placeholder attribute with data-bind? I am encountering an error message ([object object]). Can someone help me figure out how to properly utilize it? html: input id="comments" class="form-control" data-bind="attr: { placeholde ...

javascripthtmljsonknockout.js

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Enhancing font display in Chrome

Encountering issues with font rendering in Chrome. The screenshot highlights a discrepancy in color for the first item in a list: https://i.sstatic.net/dUadd.png Despite all items having identical CSS properties: https://i.sstatic.net/2ropj.png An app ...

cssgoogle-chromefontsrendering

Is there a way to submit a form without refreshing the page, even if there are no input fields present

My script is all set up with predefined elements. When I click on SUBMIT, I want it to work without refreshing the page. Currently, it refreshes the page and displays "Working". What I'm aiming for is something like this: This is my code snippet: ...

javascriptphpjqueryhtmlphp-curl

Place the file in the designated area for styling purposes

Within the pluploader, a file drop zone exists with the identifier dropFilesHere; var uploader = new plupload.Uploader({ drop_element : "dropFilesHere", /*...*/ }); If a user hovers a file over the drop zone, I want to customize it* ...

javascriptjquerycsshtmlplupload

How can I verify the content within a span element?

Here is the HTML code snippet I am working with: <span id="gruszka1">1</span> I have already figured out how to check if the specific span exists: if($('span#gruszka1').length){ //do something }); Now I want to determine if the te ...

jqueryhtml

Issue with jQuery form submission not retrieving input value

[Beginner inquiry] I am using contact form 7 on my WordPress website. I have two input fields where I need to display the event title and price: if (window.location.href.indexOf("event") > -1) { var title = $('.entry-title').text(); var ...

jqueryhtmlformsinput

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

Checking Data with Ajax for Form Validation

I have developed a form validation system using AJAX and PHP. Each text box is validated with a separate file, for instance, username_ajax.php. After the data is confirmed to be valid, a message like "Username ok" is displayed on the screen. I am currently ...

htmlajax

What is the procedure for inserting comments into inline CSS?

You know, I've been wondering how to effectively comment out inline CSS styles within HTML tags. Is it best to use the /* */ comments from CSS? Or should we opt for <!-- --> in HTML? <span class="color_dark" style="top:20px;font-size: 17px;l ...

htmlcss

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

javascripthtmlcss

Tips for creating a font awesome icon as a placeholder design

Hey there! I've been trying to change the color of just the Font Awesome icon in the placeholder, but every time I do that it changes the color of the text as well. Does anyone know how to customize the color of only the icon in the placeholder? < ...

htmlcssbootstrap-4

The configuration of DataTables with the rowGrouping plugin and specifying aoColumns definitions encountered issues

Currently, I am in the process of working on a table that utilizes rowGrouping. Up until now, working with datatables has been smooth sailing for me. However, I have encountered some challenges with my current datatable implementation. The table is initia ...

phpjqueryhtmlcssdatatable

Distinguishing Between Mobile Devices and Desktop with Media Queries

With the increasing variety of devices available, identifying whether a user is using a phone or a desktop based on media queries has become more challenging. The differences in resolution, aspect ratios, and other factors between high-end phones, laptops, ...

cssmedia-queries

How can you modify the Bootstrap class of a grid item only when the grid collapses in Bootstrap 4?

Is there a way to dynamically adjust the bootstrap class of a grid element from col-md-9 to col-md-12 only when the grid breaks due to resizing the browser window? For example, consider the following code snippet: https://jsfiddle.net/kp41m0xq/ <body ...

jqueryhtmlcssbootstrap-4

Setting the value of an input box using jQuery

As someone who is new to jQuery, I am encountering an issue with setting a default value for an input text box. Despite trying both the val method and the .attr method, neither has seemed to work for me. Below you will find the input HTML along with the tw ...

jqueryhtmlformsbusiness-catalyst

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

javascripthtmlcssprocessingp5.js

The breakdown of an object literal in JavaScript

What is the reason that we cannot access the second item in the object literal the same way as the first? var foo = {a:"alpha",2:"beta"}; console.log(foo.a) -> printing 'alpha' correctly console.log(foo.2) -> Error: missing ) after argumen ...

javascripthtml

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

javascriptajaxruby-on-rails-3htmlgeolocation

Error in conditional statement regarding the jQuery background color RGB value

I have thoroughly tested the remaining sections of my code and they are functioning correctly, however, it is not working within this particular section. This snippet of code seems to be where the errors or issues lie. if(bgc.css("background-color") == " ...

jquerycssjquery-animatebackground-color