Superfish - Adjust the Gap between each button

Is there a way to adjust the spacing between buttons on my superfish menu while using the vertical Menu CSS?

Answer №1

To create spacing between the items at the first level of your Superfish drop-down menu, you can simply add some margin to the direct children of the .sf-menu container. Here's an example:

ul.sf-menu > li {
margin-right:10px
}

If you're concerned about compatibility with IE 6, you can use the following code instead:

ul.sf-menu li {
margin-right:10px
}

Then, to remove the margin for the child LIs, you can add:

ul.sf-menu li li {
margin-right:0
}

You may need to adjust these styles based on the nesting level of your ULs.

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

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

Vertical Spacing in Bootstrap 3: Eliminating Gaps Between Divs

I am looking to eliminate the gap between certain div elements and the div positioned below it. This space is created when one div is taller than another in a column. For instance, take a look at this example: http://www.bootply.com/Hc2aO5o4bG Essential ...

Animate the object in SVG with periodic movements

Illustrate once and move items every five seconds in the sequence shown from left to right. I have looked extensively but cannot find a method to draw outer boundaries and position objects close to them. <animate xlink:href="#blue-rectangle" a ...

Adjusting the Size of a Static Banner

I have a quick question. I've been trying to create a fixed banner that will scale when the page is resized, but I'm having some trouble with the phrasing in Google search. My issue is that when using a percentage width for the large container, t ...

Uncover the HTML tag associated with specific text on a webpage with the help of selenium

<div class="searchSummary floatL"> <span>18</span> results for "gloves" </div> Can someone assist me in using Selenium to extract the 'span' tag containing '18'? I am trying to specifically retrieve the 'sp ...

Is it possible to enable table scrolling within Semantic-UI-React by utilizing Next.js?

My issue involves a wide table in the Grid component with a width of 16 on mobile resulting in strange behavior. If you view my work in progress at the following URL, you'll notice that every component is responsive on mobile except for the stretched ...

Executing JavaScript code does not execute CSS code

Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript. & ...

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

Aligning float:left divs vertically

I have multiple divs with equal widths but varying heights that I need to fit together tightly. When I set them to float left, they don't align vertically but instead line up at the bottom of the row above. Even with the example below, I want to eli ...

CSS Tip: Eliminate unnecessary white space in text areas on iPhone devices running iOS 10

Can anyone help me with a formatting issue I'm facing? I want the text inside a textarea to appear exactly like the text inside a div element, including padding and other styles. The code below seems to work fine on my Windows Chrome browser. However ...

broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged ...

Empty vertical space on the right side in iPad view

I am currently working on the development of this website and facing an issue. https://i.sstatic.net/Y7B7Q.png When switching to iPad view in Chrome's developer mode, I noticed a blank column on the extreme right side that spans the entire page. I a ...

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

Leveraging the power of selenium's CSS selector for various elements

In my Perl script, I have multiple lists of links that can collapse and expand. To determine the total number of links in a list, I am using the get_xpath_count('//li/a') function. The challenge I am facing is how to extract the actual names of ...

Using the CSS property display:none within a PHP email template can be a clever way to

Currently, I am developing a PHP HTML email template where I need to hide a table row when a PHP condition is met. Can anyone provide guidance on how to script this? I am using the following method: this is my code below: <tr style=""'. ...

Recalling a hidden div in a flexbox arrangement

I am facing a challenge with hiding and displaying two aside divs to enable a fullscreen view of my central div main. The layout is created using flexbox to assign proportions, but when I try to redisplay the elements, it disrupts the original design. Belo ...

What is the best way to horizontally scroll to a selected item within a scrollable div using React?

I'm working on a project that involves creating a horizontal scrollable list. The goal is to have the list automatically scroll to the selected item, centering it in the view. While attempting to implement this feature using React, I've encounte ...

What is the best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

What is the best way to position two grid containers side by side?

I am new to using Material UI and Grid, and I'm encountering an issue with positioning two grid containers side by side. My goal is to have an image on the left within a Grid container, and a list of objects on the right. While I was successful in po ...

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...