Shifting the navigation bar to the right to accommodate a logo on the left side of the bar

I'm currently working on adjusting the position of the navigation bar to the right in order to accommodate a logo on the left side of the navigation text. Despite trying to use float-right, it doesn't seem to be working as expected.

Below is the CSS code I am using:

#Main2 {
height:90px;
background-color:ebebeb;

}

ul {
    margin:0;
    padding:0;

}

li {
    list-style-type:none;
    float:left;
    display:block;
    width:150px;
    height:90px;
    text-align:center;
    line-height:90px;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-size:17px;


}

li a {
    text-decoration:none;
    color:black;

}

li:Hover {
    background-color:pink;
     background: -webkit-linear-gradient(#f1efef, #fcfbfb);
  background:    -moz-linear-gradient(#f1efef, #fcfbfb);
  background:         linear-gradient(#f1efef, #fcfbfb);
}

Answer №1

Enhance your style with the following CSS attributes:

Position:relative;
Left:50px;//adjust to your preference

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

Displaying a table in Chrome/Firefox with a mouseover feature

Hovering over the rows of this table triggers a display of descriptions. html: <tr title="{{transaction.submissionLog}}" class="mastertooltip">... JavaScript: $('.masterTooltip').hover(function(){ // Hover functionality ...

Retrieve the text located within the span tag using Selenium

When I try to inspect the element using Google Chrome, I come across the following code: <div class="form-style-abc"> <fieldset> <legend><span class="number">*</span>Search Zone</legend> I am trying to retrieve ...

Pass a variable between popup.js and background.js in a Chrome Extension

Despite finding some answers to similar questions, none of them provide a complete solution. The information in the answers lacks necessary documents that were not included in the original question. My goal is to create a scaffold for Chrome extensions wh ...

Close the Bootstrap 3.1.1 collapse feature by clicking outside of it

I'm currently working on a Twitter Bootstrap 3.1.1 app that features a nested Bootstrap structure. <ul class="goods-categories goods-list"> <div id="point" data-toggle="collapse" data-target="#all" class="point blue m-top">All products& ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

Fetching data from local JSON file is being initiated twice

I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...

Execute an HTTP POST request to the Node server, sending an empty object

For my project, I am attempting to send an HTTP Post request to my Node server from an html form. Despite using Body Parser and setting it up correctly, I am facing an issue where the req.body on my server is returning as an empty object. Can anyone prov ...

The issue with HTML5 video not looping in Chrome on Sitefinity CMS

I encountered a unique issue where I was unable to get an HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplayed without any problems. Here is a snippet of my code: <video id="frontpage-video" autoplay loop> ...

I want to set a single background image for all slides in fullPage.js. How can I achieve this

I am attempting to replicate a similar effect as shown in this example: The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections. I have searched ...

Ensure equal width for an HTML element by matching it with the dimensions

Hello, I am facing an issue with a dropdown button. Whenever I hover over it, the links to different pages drop down. However, I want the width of these links to be the same as that of the button. The size of the button varies as it is set to 100% width o ...

Using (javascript:) within Href attributes

Recently, I've noticed some people including "javascript:" in the href attribute of an a tag. My question is: what is the purpose of this? Does it guarantee that clicking on the a tag directs the function of the click to JavaScript for handling, rathe ...

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

How to preselect a value in a select tag in Angular 8

I am looking to assign a default value to a select tag, with the values being declared in a table within my component and displayed using the ngFor directive: <form> <div class="form-group col-4"> <span class="badge badge-theme m ...

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Currently, I am encountering an issue with MUI type="number" textfields. When I focus on the field and then scroll the mousewheel, the input value changes unexpectedly. I have looked into adding a blur function after scrolling to prevent this, but I would ...

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

What causes a div with display: table-cell to have excessive padding when an image is added to it?

Is there a way to remove the padding completely? Take a look at the jsfiddle version: CSS: .table { display: table; height: 250px; border-color: black; width: 500px; padding: 0px; } .cell { display: table-cell; height: 250px ...

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...