I created a navigation bar using an unordered list (ul) with list items (li). However, I encountered an issue where the items were displaying in reverse order until I applied the following CSS:
.nav-bar .btn{
float: left;
}
.nav-bar ul{
float: right;
}
Unfortunately, this caused all the buttons to overlap and appear too small. Does anyone have a solution to this problem?
I have made some changes to the <ul> element by removing the <div> tags inside it and adding padding. You can customize this example based on your requirements or desired user interface.
/*----------nav-bar-----------*/
.nav-bar {
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
height: auto;
z-index: 1;
}
.nav-bar .logo {
top: 0;
width: 150px;
position: absolute;
left: 1%;
height: 90%;
display: block;
}
.nav-bar .btn {
width: 21%;
padding-bottom: 1.2%;
float: left;
display: block;
list-style:none;
border-bottom: 2px solid #777777;
text-shadow: 2px 2px 4px #000000;
margin-bottom: 0;
}
.nav-bar ul {
float: right;
}
.nav-bar a {
padding-right: 40px;
padding-top: 12.5%;
width: 100%;
padding-bottom: 2%;
text-decoration: none;
color: #777777;
bottom: 0;
} <body>
<div class="nav-bar">
<img class="logo" src="logo.png" />
<div class="container">
<ul>
<li class="btn">
<a href="#">Home</a>
</li>
<li class="btn">
<a href="#">About</a>
</li>
<li class="btn">
<a href="#">Services</a>
</li>
<li class="btn selected">
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</body>I am experiencing some challenges when attempting to position the cursor after an <i> tag within a contenteditable element. Currently, this is what I have: <p contenteditable="true"><i>H</i><i>e</i><i>l</i> ...
I am currently utilizing the Struts2 framework in conjunction with the tiles 2.0.6 plugin for my web application. Within my webapp, there is a primary "base" layout that comprises of a header, a footer, and the main page content: <definition name="shar ...
Could someone help me achieve a 2-column layout where the left column contains text and the right column an image? I want the image in the right column to zoom when the user hovers over either the left or right column. The issue is that when the user hove ...
According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...
My JS game involves updating a score variable. When the game reaches a gameOver state, I want to compare the score to one saved on the server. If the player got a higher score, I'd like to overwrite the previous high score with the new one. If it&apos ...
I'm attempting to achieve the desired outcome by utilizing the code provided at What I'd like to know is why the scrolling function isn't working as expected. Instead of scrolling, it simply expands the table. To see the difference, try run ...
Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...
I am encountering an issue with jQuery while trying to add a blog section to my existing single-page site. The new blog will be located in a separate /blog directory, causing the menu item for it to differ from the other href="#" tags on the index.html pag ...
How can I retrieve the bank name, branch, city, and district from a JSON array? Below is the contents of my results.json file: { "ifsc": [{ "ifsc": "PUNB0000100", "bank": "PUNJAB NATIONAL BANK", "city": "ABOHAR ...
Can you figure out why the element with content is out of order compared to the other elements without content in the code below? This issue seems to disappear when all elements have content. Any insights on this peculiar behavior? (Thank you in advance fo ...
I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...
Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...
Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11. Here is the HTML code: <ul> < ...
Currently, I am delving into the realm of frontend development and facing a challenge with designing a table. My goal is to merge multiple columns into a single column by dividing them into cells. I am aware of the bootstrap classes colspan and rowspan, ho ...
I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...
What is the most effective method for editing content while using ng-repeat? In an ideal scenario, the added birthday would be displayed as a hyperlink. When clicked, it would reveal an edit form similar to the add form, along with an update button. Chec ...
My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...
Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...
Several drop down menus need to be implemented. The requirement is that when an option from the drop-down is selected, a corresponding custom function should be called. However, in the code below, what should replace opt.mtd since it is not functioning as ...
We are currently involved in the process of upgrading an outdated corporate intranet. The challenge is that our users primarily rely on IE8 and IE9, while most of our sites were designed to function with compatibility for browsers between IE5 - IE9. While ...