Tips for customizing the border design of a Semantic UI dropdown menu:

Utilizing Semantic UI for the dropdown feature, only the dropdown and transition components of Semantic have been incorporated. The challenge lies in altering the border of items within the Dropdown list where besides the first element, the remaining elements possess bold borders. Despite setting the border-bottom-width to 0 in order to maintain uniformity with borders on three sides, the desired effect is not being achieved.

An additional issue arises when expanding the dropdown toggle on mobile view, causing the "Contact Us" section to be partially cut off from the navbar-toggle. (The navigation bar has been constructed using Bootstrap 4.)

The following CSS properties were applied to style the dropdown:

.item{
  border-color: #812485 !important;
  border-bottom-width: 0px !important;
  border-width: 1px !important;
  color: #3F72AF !important;
  border-style: solid !important;
}
 .navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

To view the codepen, click here.

htmlcssbootstrap-4dropdownsemantic-ui

Answer №1

If you want to make the borders semantic on all three sides, you can achieve it by following this CSS code snippet. Verify that your CSS is properly positioned within your code.

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border: 1px solid #3F72AF !Important;
  border-top: 0 !important;
}
.ui.dropdown .menu>.item:first-child {
 border-top: 1px solid #3F72AF !Important;
}

It's up to you, but my suggestion would be to stick with this style as it will enhance the overall appearance.

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border-bottom: 1px solid #3F72AF !Important;
}
.ui.dropdown .menu>.item:last-child {
 border-bottom: 0 !Important;
}

Answer №2

What the code snippet does is it eliminates the border-bottom-width property and subsequently reapplies it using border-width: 1px;.

If you wish to get rid of borders in your dropdown, just utilize this CSS:

.item{
  border: none !important;
  color: #3F72AF !important;
}

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

What is the best way to attach a function to an href attribute for creating a dynamic link?

I've been struggling to pass a function to the href attribute in my link tag, but no matter what I try, it just doesn't seem to work. It either redirects to a 404 page or is completely unclickable. What could be causing this issue? This link app ...

javascripthtmlhref

What is the best way to eliminate HTML entity values from an AJAX parameter?

Recently, I have been working on incorporating AJAX into my PHP code. Specifically, I am trying to retrieve values from a database. My approach involves using the ID of an item when the edit button is clicked to pass it through AJAX and fetch the correspon ...

phpjqueryhtmlajax

What is the best way to make a multi-column image responsive in amp-html code?

Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...

htmlcssamp-htmlresponsive-images

stacking order of floated and positioned elements

After researching on MDN and reading through this insightful blog post, it is suggested that in the absence of a z-index, positioned elements are supposed to stack above float elements when they overlap. However, upon closer examination, the example prov ...

htmlcss

How can I extract just the day and month from the bootstrap datepicker?

I am struggling to extract only the day and month from a bootstrap datepicker. I have tried using attributes like viewMode and minViewMode, but so far, I haven't been successful. HTML: <input type="text" class="form-control" name="Date" id="Date" ...

datepickerbootstrap-4

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

javascriptjqueryhtmlcss

Why does my progress bar in React not begin on the left side and instead starting in the middle? (See image for reference)

Image Having an issue with the scrolling progress bar that seems to be stuck in the middle and moving in both directions, which doesn't look visually appealing. Can anyone suggest how to resolve this? Interestingly, the same code works fine on online ...

javascripthtmlcssreactjs

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Expanding a bootstrap accordion not only increases its own height, but also affects the adjacent one

I am facing an issue with my FAQ page where I have used bootstrap accordion tabs. The problem arises when I place them side by side in a 50/50 split, as when one tab is opened, the adjacent tab also expands without displaying its content. For example, thi ...

htmlcsstwitter-bootstrapbootstrap-4

Using Vue.js to showcase images in a horizontal layout (5 images per row)

I am trying to retrieve images from the service and display them horizontally, with a total of 10 images. My goal is to show the first five images in the first row and the next five images in the second row. Here is my current attempt: <div style=" ...

htmlcssvue.jsvuejs2vue-component

The draggable functionality is malfunctioning once the image is enlarged with Jquery

When it comes to creating a viewport function using jquery.viewport, I'm faced with the challenge of integrating it with jQuery UI slider and a custom zoom function for images. I've also utilized a plugin to enhance the viewport functionality. T ...

javascriptjquerycsszooming

The correct way to modify the VB property name for display in Razor

My property goes by the name "UglyPropertyName" but in my view I wish to change its Display Name to "New Role" using @Html.DisplayNameFor(Function(model) model.UglyPropertyName) In C#, you can update the display name of a property by adding [Display(Nam ...

htmlvb.netrazor

How can I dynamically insert a new HTML element into $event.target using Angular 2?

I have a webpage with a list of items. I want to display a "copy" button next to each item when the mouse hovers over it. I am currently able to create the "copy" button within the element using the following method: mouseOver(event) { if (event.tar ...

javascripthtmlangulartypescript

Basic layout design for iPad using HTML

I am working on creating a responsive layout that functions smoothly across all devices. Currently, I am facing challenges specifically with the iPad. The issue lies in preventing the whole webpage from becoming scrollable when trying to scroll within a sp ...

htmlioscssipad

Shifting the Ion Menu side dynamically based on screen size: A step-by-step guide

Working with Ionic 4, I encountered the need to dynamically change the side property of ion-menu. On larger screens, ion-menu is always visible or static, whereas on smaller screens, it remains hidden until the user clicks on the ion-menu-button. My goal i ...

htmlangulartypescriptionic-framework

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

javascriptjqueryhtmlcss

What is the best way to position a website in the center in the provided example?

Simple question here, couldn't find it in the search so sorry if it's a repeat. How is the content on this responsive website centered? I've checked the body margins but can't seem to locate anything. Thank you for your help. ...

csshtmlresponsive-design

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

htmlcss

Is there a way to retrieve the name of the active tab in ngb-tabset when the component loads in Angular?

Incorporating ngbTabset for tab navigation in my current project has been a game-changer. However, I'm encountering an issue where the active tab name is not being displayed in the console upon app initialization. Any ideas on how to resolve this? You ...

htmlangularjsangularbootstrap-4angular-material

Encountering a malfunction in executing the AngularJS controller file

In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...

javascriptjqueryhtmlangularjs