Issue with navigational button layout

I am facing an issue while designing my navigation menu with 4 circular items spaced about 20 px apart on the top right of the screen. I have managed to style each nav item as a circle, but when I try to position them in the upper right corner, only the 4th item is visible while the first 3 disappear. Can someone please assist me?

HTML:

<div id="nav">
    <ul>
        <li> <a href="#" class="navbutton">The Story </a></li>
        <li> <a href="#" class="navbutton">Design </a></li>
        <li> <a href="#" class="navbutton">Specs </a></li>
        <li> <a href="#" class="navbutton">Gallery </a></li>
    </ul>
</div>

CSS:

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: absolute;
  top: 50px;
  right: 100px;}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 20%;
    margin: 15%;
}
htmlcssnavigation

Answer №1

How about considering this approach:

#menu{
  position: fixed;
   top: 30px;
  right: 80px;
}
.menu-item {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  font-size: 12px;
  color: #ffffff;
  line-height: 70px;
  text-align: center;
  background: #4FA5B1;
}

ul {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style-type: none;
}

li {
    width: 110px;
    float: left;
}
<div id="menu">
<ul>
<li> <a href="#" class="menu-item">About Us </a></li>
<li> <a href="#" class="menu-item">Services </a></li>
<li> <a href="#" class="menu-item">Products </a></li>
<li> <a href="#" class="menu-item">Contact </a></li>
</ul>
</div>

Answer №2

Give this a shot:

#menu{
  position: absolute;
   top: 50px;
  right: 100px;
}
.menuLink {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 20%;
    margin: 15%;
}

Answer №3

The reason for the overlap of your navbutton elements is due to their CSS property position: absolute, causing only the last one to be visible.

Here is a snippet you can try:

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: relative; /* ADDED */
}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 20%;
    margin: 20px; 
}
<div id="nav">
    <ul>
        <li> <a href="#" class="navbutton">The Story </a></li>
        <li> <a href="#" class="navbutton">Design </a></li>
        <li> <a href="#" class="navbutton">Specs </a></li>
        <li> <a href="#" class="navbutton">Gallery </a></li>
    </ul>
</div>

Answer №4

To position the navigation at the top right corner of the page, you can apply the following CSS styles:

#nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

#nav li { 
    display: inline-block; 
}

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: relative; /* ADDED */
}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 100px;
    margin: 20px; 
}

Answer №5

  #nav{
   position:absolute;
   top: 50px;
right: 100px;
  }
  .navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  
}

ul {
       padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
        margin: 20px; 
float:left;
}

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

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

Height of the image is being boosted while the width remains consistent

When working on a responsive page layout, I encountered an issue with increasing the height of an image while keeping the width constant. Modifying the width of the image reflects changes, but adjusting the height does not seem to make any difference. I t ...

htmlcss

Converting images to greyscale or transparency within a ReactJS component

I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...

javascriptcssreactjs

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

Link PayPal payments to the individual making the payment

On my website, I offer in-game features that can be purchased through a miniature store with PayPal buy now buttons. I'm looking for the best and most secure method to automatically deliver these in-game bonuses to users after they have completed thei ...

phphtmlpaypal

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

Issue with React MUI V5 causing theme not to display properly within shadow-root element

After trying to attach the shadow root using the MUI createTheme function, I encountered rendering issues. Despite following the instructions in this helpful guide on the MUI website, my problem persists. // App.js const cache = createCache({ key: ' ...

cssreactjsmaterial-ui

`Center Google My Map Location - Embedded in the Middle of the Page`

Recently, I transitioned to using an embedded My Map for a business with 2 locations. However, I encountered some challenges in customizing the map's height, width, and centering on the page. Is there a way to resolve this issue? New HTML code which ...

htmlgoogle-mapsjoomla

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

Issues with IE9's CSS hover functionality are causing problems

This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work a ...

htmlcssinternet-explorer-9

Tips for creating floating and right-aligned notifications using CSS in Vue.js

Struggling to position my basic notification component in the top right corner. Here is my HTML: <div class="notifications"> <p>{{ notification.message }}</p> </div> This is my notifications class: .notifications { position: ...

htmlcssvue.js

What's the best way to position a grid item so that it moves along with its fellow siblings

I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's exi ...

htmlcsscss-grid

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

jqueryhtmlcssjquery-mobile

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

htmlcsshtml-tablegradient

Fatal error in CodeIgniter occurring while invoking CSS less functions

Whenever I try to execute this function, I encounter the following error message: "Fatal error: Uncaught exception 'Exception' with message 'load error: failed to find test.less' in C:\xampp\htdocs\project\applic ...

phpcsscodeigniterless

Scraping Secrets: Unraveling the Art of Procuring User Links

I need assistance with extracting links from the group members' page on Meetup: response.css('.text--ellipsisOneLine::attr(href)').getall() Can you please help me understand why this code is not functioning correctly? This is the HTML stru ...

pythonhtmlscrapy

Updating the table row by extracting data and populating it into a form

As part of my project, I am implementing a feature where I can input 'Actors' into a table using a Form. This functionality allows me to select a row in the table and retrieve the data of the chosen Actor back into the form for updating or deleti ...

javascriptjqueryhtml

Customizing the background color in TurnJSIncorporating

Recently, I encountered a problem that has left me puzzled. Despite searching online for help, I have not been able to find a solution. The issue lies with the basic code provided on the official page of the TurnJS script. <div id="flipbook"> <di ...

javascripthtmlcssturnjs

I am struggling to create a responsive HTML/CSS/Bootstrap file that can adapt to all screen sizes

Exploring the world of web development for the first time and seeking guidance on how to make file elements responsive to accommodate any screen size or resolution. Assistance would be greatly appreciated! Here's a snippet of my code: `\<!DOCT ...

htmltwitter-bootstrapwebresponsivebootstrap-5