I am struggling with aligning the list items side by side

I am currently facing an issue with my list items that have anchor tags. They are currently set to display block with background images, but I want them to display inline. However, they are stacking on top of each other instead. The ul is being generated by Wordpress and when I inspect the li's, they seem to be filling the entire parent div for some reason.

Click here to visit the live site, password: springy88

CSS

.nav-bar li {display: inline; font-size: 2.66em;}
.shop a{background-image:url('../images/shopFull.png'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}
.shop a:hover { background-position: 0 -30px; }
.services a{background-image:url('../images/servicesFull.jpg'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}

HTML

<nav class="menu-main-nav-container"><ul id="menu-main-nav" class="nav-bar"><li id="menu-item-17" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.goodmorningmoon.ca/shop/">Shop</a></li>
<li id="menu-item-16" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.goodmorningmoon.ca/services/">Services</a></li>
<li id="menu-item-18" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://www.goodmorningmoon.ca/blog/">Blog</a></li>
<li id="menu-item-15" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.goodmorningmoon.ca/contact/">Contact</a></li>
</ul></nav>
csswordpresslistmenuinline

Answer №1

To enhance the appearance of the navigation bar, consider incorporating the float property into the li selector. Here is a suggested implementation:

.nav-bar li {display: inline; font-size: 2.66em; float: left;}

Additionally, adding some margin can further improve the layout.

Lastly, don't forget to include a div with the clear:both CSS property after the menu section.

Answer №2

experiment with

  • ( * ) Solutions for Internet Explorer
  .navbar li{
       try different styles;
       *switch to inline mode;
       *adjust zoom level to 1;
    }

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

Adjust the appearance of self and other classes on hover using CSS

I'm looking for a way to use the :hover effect in CSS to change the font color of one class (.footer_status_tex) and the background color of another class (.footer_status_gear). Here's a simplified version of what I have in mind: CSS .footer_s ...

csshover

Tips for hiding a div only on mobile devices while always displaying it on large screens using AngularJS or CSS

How can I use Angularjs or css to hide a div on mobile devices only, ensuring that it is always displayed on large screens? ...

cssangularjs

Activate the timepicker in Bootstrap when the user clicks on the input field

Struggling to implement a timepicker feature? Look no further than this resource. After adding the necessary js and css to your project, you may encounter issues with the popup not appearing when clicked. The code provided offers a TextBox control with s ...

javascriptjquerycsstwitter-bootstraptimepicker

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

Upon browsing the Mozilla homepage, I noticed a peculiar element in the center - a <select> option with an arrow lacking border and background color. In contrast, when visiting the Facebook sign-up page, the drop-down arrow adheres to the Windows sta ...

csswindowsfirefoxfirefox4

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

Adjust the height of the div element to match the screen height with AngularJS controller

Can someone please assist me in resolving this issue? I'm currently working on a div element that displays data (positioned on the left side of the screen). I want to add a scrollbar exclusively to this div. I managed to achieve this by using the fol ...

htmlcssangularjsscrollbar

What exactly is the significance of "utilizing a universal class name"?

In my current project, I am utilizing Material-UI version 3.1.2 to create the interface. Previously, when I was using Bootstrap4, I included style="overflow-y: scroll; height: 100%" in my head tag to ensure a scrollbar is always present, preventing the ap ...

cssmaterial-ui

Creating tuples in a list by grouping elements from another list using Python

Imagine having a set of data: set = [1, 2, 3, -4, -5, 3, 2, 4, -2, 5, 6, -5, -1, 1] The task is to group this data into a list of tuples. Each tuple should contain two lists - one for positive numbers and one for negative numbers. Tuples are created base ...

pythonlisttuples

``There seems to be an issue with the alignment of items in the

I am fairly new to using css and bootstrap and I am currently working on integrating a carousel into my angular web app. I copied the code from the bootstrap site but I am facing challenges in aligning everything properly. Additionally, the image slides do ...

cssbootstrap-4carouselangular-ui-bootstrapbootstrap-carousel

What's the best way to create flying text effects - using CSS or JavaScript

Looking for a way to enhance the user experience of my shopping cart on Android and iPhone/iPod, I want to implement a feature similar to the iTunes Store where the price flies down to the total when a purchase is made. Since I use jQuery (not UI) on this ...

javascriptandroidiphonecss

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

csscss-floatoverflow

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

javascriptjqueryhtmllist

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

javascriptjqueryhtmlcsswordpress

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

htmlcss

Is it possible to store the outcomes of a loop in a list using Python?

I wrote a loop to count from 0.00000000 up to a specified number by increasing in intervals of 0.00400000. While the loop is functional, I am unable to store the values into a list. My intention is to plot this time loop against another existing list (curr ...

pythonlistloops

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Hi there! I stumbled upon this post (http://stackoverflow.com/questions/7645702/tab-slide-out-using-jquery-need-more-than-one) while experimenting with a plugin. I'm curious if anyone here knows how to integrate this plugin into a menu. My idea is to ...

jqueryhtmlcss

Tips for effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

htmlcssbootstrap-4

New options instead of <dl compact> that are not outdated

One feature I remember fondly from Internet Explorer is the ability to create compact definition lists using code like this: <dl compact> <dt>f</dt> <dd>Firefox</dd> <dt>i</dt> <dd>Int ...

htmlcss

Navbar optimization by eliminating unnecessary whitespace at the end

I'm working on a navigation bar that has four links. I need to get rid of the extra space to the left of "Projects" and to the right of "Contact." It seems like this spacing is part of the unordered list structure, rather than padding or margin. Chec ...

cssnavbarnav