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

Inconsistencies in Height Among JQuery Elements

I am encountering an issue with my datatable.js, where I am attempting to limit its height based on a specific row number, such as 4.5 rows. However, I am facing a problem with the row height (tr height). For example, when using the following method with m ...

javascripthtmljquerydatatables

Maximized - Immersive Full Screen Background - Limited to Half the Size?

Looking to incorporate the Supersized Fullscreen background found at Supersized Interested in having the slider appear on the right half of the site with content on the left half. Want the content to move when scrolled while keeping the background station ...

jqueryhtmlcsssupersized

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...

phphtmlvalidationif-statement

Switch between input and the input is not displayed inline

I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...

htmlcss

Tips for submitting an e-mail through an HTML form with the help of Node.js and Gulp

Today, I've been tackling the challenge of creating an HTML contact form that can send an email using Node.js and Gulp. However, I'm struggling to find a solution. Using a relative path to a simple .PHP file doesn't seem to be working, so it ...

javascripthtmlnode.jsnpmgulp

JavaScript's counter variable can become confusing when used in an if statement

Struggling as a beginner in javascript, I find myself stuck on writing an If statement that triggers after the fourth turn. My goal is to have an alert pop up once the user has clicked on four options. The counter variable "turns" was added to track prog ...

javascripthtmlfunctionif-statementconditional-statements

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

javascripthtmlreactjs

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

javascriptjqueryhtmlangularjs

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

htmlcss

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

I need to figure out how to hide the submit button if the email entered is the same as the one in the database from action.php. Can anyone help me with integrating this functionality into my existing code? <form onsubmit="return submitdata();"> ...

javascriptphpjqueryhtmlajax

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

javascriptjqueryhtmlcss

Ways to display scrollbar even when inner container lacks fixed height within a fixed position outer container

I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hid ...

htmlcssreactjsscrollbarcss-position

Combining classes within LessCSS for nested functions

I'm struggling to get LessCSS to process a file with a series of nested rules using the "&" concatenation selectors. For instance, the code below works fine: .grey-table { background: #EDEDED; tr { th { background: #D ...

cssnestedlessrulesmixins

Tips for creating text that wraps around an image in an editor

On my webpage, I am using an editor called Cleditor jquery plugin. The default setting allows me to insert images, but the text does not wrap around it. I attempted using vertical-align:top, but it did not resolve the issue: What CSS property should I ap ...

jquerycsseditorword-wrap

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

When using the POST method to modify data via an HTML form, the previous values may be

I am currently developing a CRUD system and focusing on the Update functionality. My task involves updating existing user data with new information submitted through an HTML form. At this stage, I am working on retrieving the POST values from the HTML for ...

phphtmlsqlmysqli