Looking for help organizing a navigation bar?

I recently embarked on the journey of creating my own website and I am in need of assistance from individuals who possess expertise in CSS and HTML. The specific challenge I'm currently facing involves aligning the navbar elements properly. I aim to position the "beginning," "about me," and "statistics" sections exactly in the middle, with "Objectives" and "contact" on the right, and the logo on the left. The main issue I encounter is achieving perfect alignment that ensures consistent spacing between the left and right sides while maintaining the center alignment of the navbar. Moreover, I am striving to make the website responsive to deliver a seamless experience across various devices. Ultimately, my goal is to develop an outstanding portfolio site that showcases my skills effectively. Although I haven't utilized Bootstrap before, I have included it in my code. Apologies for the lengthy explanation; as a novice in this field, I find it challenging to articulate my concerns effectively. Additionally, my code may appear messy, so any feedback or corrections provided would be highly appreciated.

<!DOCTYPE html>
<html lang="en">
<!-- Additional code snippets -->
htmlcssbootstrap-5

Answer №1

Currently, I am using a laptop with a smaller screen, so I've made some adjustments to your code to ensure it functions as desired.

Be sure to define the width values for all elements and test its mobile responsiveness too.

Best regards

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.navbar {
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.home {
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}
.logo {
    line-height: 70px;
    margin-left: 30px;
    margin-right: 20px;
    max-width: 20px;
  }
.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}
.menu a {
  margin: 0 5px;
  font-size: 17px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}
.menu2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px;
}
.menu2 a {
  margin: 0 5px;
  font-size: 17px;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
}
a.special,a:hover{
    background-color: paleturquoise;
    transition: .5s;
}
p{
    color: floralwhite;
}
.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
<nav class="navbar">
        <div class="logo">
            <img src="./veebipilt.png" width="128" height="56">
        </div>
        <div class="menu">
          <div><a href="#">Beginning</a></div>
          <div><a href="#">About me</a></div>
          <div><a href="#">Statistics</a></div>
        </div>
        <div class="menu2">
            <div><a href="#">Objectives</a></div>
            <div><a class="special" href="#">Contact</a></div>
        </div>
    </nav>

Answer №2

When it comes to creating a perfectly centered Navbar with different width left and right-aligned items, CSS Flexbox is the way to go. I have implemented this concept on Codepen, inspired by an idea from this Stack Overflow post. You can check out my modified Navbar implementation here: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq?editors=1100

The addition of the centerline class and div provides a visual divider for checking the alignment of the center div in the example.

CSS:

.centerline {
    position: fixed;
    top: 0;
    left: 50%;
    width: 10px;
    height: 100%;
    background: black;
    transform: translateX(-50%);
    opacity: 0.5;
    z-index: 1
}

.parent {
    display: flex;
}

.left,
.right {
    background-color: red;
    flex: 1 1 0%;
    overflow: auto;
}

.right {
    text-align: right;
}

.center {
    background-color: green;
}

Html:

<div class="centerline"></div>
<div class="parent">
    <div class="left">
        short text.
    </div>
    <div class="center">
        I'm in the center.
    </div>
    <div class="right">
        Very loooooooong text.
    </div>
</div>

For more insights on how to use Bootstrap, you can refer to these resources:

https://github.com/twbs/bootstrap/discussions/36486

https://github.com/twbs/bootstrap/pull/36523/commits/fca49e8ee6b4d768d0ec144fb3b73ac2c5ff3cc0

You can also explore some Bootstrap Navbar 4 code examples (note: classes may need updates for Boostrap 5) at: https://codepen.io/yesiamrocks/pen/MVOWXZ

Answer №3

Your CSS could use some adjustments. Consider implementing the following changes (specifically focusing on vertical-align and line-height):

.navbar .menu li a{
    font-size: 17px;
    line-height: 56px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

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

What is the best way to flip the direction of the text input for a Calculator?

I am currently working on creating a basic calculator from scratch using HTML, CSS, and JavaScript. I have been trying to figure out how to align the numbers to the right side of the input element. Can anyone provide me with guidance on how to achieve thi ...

javascripthtmlcss

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

Launching a modal in a new browser window with the help of JavaScript or PHP

I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...

javascriptphpjqueryhtmlcodeigniter

Effortlessly navigate to the start of a section once the expander box is collapsed with this simple trick!

The link to the page I'm talking about can be found here: If you're looking for the JQuery page, you can access it here: When you click on "Read More," my goal is for the page to scroll up to the heading (<h1>) or the beginning of the d ...

jqueryhtmlexpander

Striving to make edits that will reflect changes in the database, however, I continue to encounter error CS0123 stating that there is no matching overload for 'Insert_Click' with the delegate 'EventHandler'

Welcome to the front-end of my webpage: <div class="div"> <asp:Button style="background-color: #007aff; width: 100%; padding: 5px" Text="SAVE" OnClick="Insert_Click" ID="InsertID" runat="s ...

c#htmlasp.netsql-server

How to load an iframe only upon clicking on a link

I am struggling to make the iframe popup appear only when a specific class link is clicked. Here is my HTML and JS code: Unfortunately, nothing happens when I click the link with the class 'aclass'. I have updated my JavaScript, but the issue ...

javascripthtml

Unable to implement a transition to adjust the scaling transformation

As I work on developing a website for a local business, my progress involves creating a menu bar. However, I am facing an issue with the transition I have applied using transform: scale(1.2) which does not seem to be working as intended. After spending h ...

htmlcss

Display a division upon clicking a button using AngularJS and HTML

Looking to implement a functionality in my HTML page using angularJS. I am currently learning angularJs and experimenting with a feature where clicking on a button will display a specific div (EmployeeInfoDiv) on the webpage. The idea is to fill out some t ...

htmlangularjs

Finding the file in a separate directory within the src path

In my projects directory, I have a folder named projects which contains both a game folder and an engine folder. Inside the engine folder, there is an engine.js file. My issue is that I want to access this engine.js file from my game.html file located in a ...

javascripthtmlhyperlink

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

I am developing a table within a .NET Core Web Application that includes multiple rows and columns filled with data retrieved from a MSSQL server through a WEB API Given the need for numerous rows and columns, I am considering using a for loop inside my & ...

javascriptc#htmlasp.net-mvcvue.js

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Displaying data from a PHP form

I'm working on a table that is populated with data from my controller. The issue I am facing is that only the first record, in this case Sephen C. Cox, does not redirect me when I click the "add employee" button. For all other records, the button work ...

phphtml

Extracting pictures with py Jupyter

While attempting to scrape images from this URL using Python in Jupyter: https://www.adobe.com/products/catalog.html?sort=name&types=pf_252Fdesktop&types=pf_252Fmobile&types=pf_252Fweb&page=1, the code I ran resulted in the following error: ...

pythonhtmlimageweb-scraping

What is the best method for placing text over an image in Dreamweaver?

What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png Below is a snippet of my code: HTML <body> <main> <header> <img src="images/headerimag ...

htmlcssimagedreamweaver

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

javascriptcssreactjsmaterial-ui

Duplicate table row and insert new cell

I am currently attempting to duplicate a row from one table into a new table and then include an additional td at the end of the copied row containing a delete button. Thus far, I have successfully duplicated the row but am struggling to find a method for ...

jqueryhtmlcss

The error message for an onclick event in HTML/JavaScript references a ReferenceError, and also involves issues with

Currently, I am working on creating a simple text-based golf game as a coding exercise. This game does not involve any trigonometry; instead, it relies on randomness to determine how hard the ball is hit and how many shots are required to reach the hole. A ...

javascripthtml

Adjusting jQuery inputmask mask according to dropdown selection: A complete guide

I am utilizing jQuery inputmask to achieve a specific effect: Currently, I have set up a simple formatting for US & Canada phone numbers like this: $("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" }); However, I want to dynamically chan ...

javascriptjqueryhtml

Using Flutter to return an HTML response rather than JSON

Experiencing an issue and seeking assistance with this Flutter code as a newcomer to the platform. I am able to successfully retrieve data using https://jsonplaceholder.typicode.com/posts, but encountering errors when trying to access my company's URL ...

htmlflutterdartdio