I am using Semantic UI for the dropdown, and I have only included the dropdown & transition parts of Semantic. I need to change the border of the items in my Dropdown list but the thing is except the 1st element, the other elements have bold borders. I have set the border-bottom-width to 0, to have border's to only 3 sides and make everything uniform but it is not working.
Also when the dropdown toggle is expanded on mobile view, the Contact Us part is getting cut from the navbar-toggle. (The navbar is made with Bootstrap 4.)
This is the CSS I used for the dropdown and 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%;
}
Here is the codepen https://codepen.io/arnab4srk/pen/qBOoqre
As I can see you are trying to make border semantic on all three sides, so you can do it like this, all you need to do is make sure your you CSS is working by checking its position in 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;
}<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand h1" href="#">
<div class="logo">
<img src="Assets/Images/logoWhite.png" height="60px" width="47px">
<img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link nav-pills" href="index.html">Home</a>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
<div class="menu">
<div class="item">
Languages
<div class="menu">
<a class="courses item" href="courses/spanish.html">Spanish</a>
<a class="courses item" href="courses/french.html">French</a>
<a class="courses item" href="courses/german.html">German</a>
</div>
</div>
<div class="item">
Technical
<div class="menu">
<a class="courses item" href="courses/web.html">Web Development</a>
<a class="courses item" href="courses/app.html">App Development</a>
<a class="courses item" href="courses/ios.html">iOS Development</a>
<a class="courses item" href="courses/c.html">C</a>
<a class="item courses" href="courses/c++.html">C++</a>
<a class="item courses" href="courses/java.html">Java</a>
<a class="courses item" href="courses/python.html">Python</a>
</div>
</div>
<div class="item">
IOT with Robotics
<div class="menu">
<a class="courses item" href="courses/iot.html">Internet of Things</a>
<a class="courses item" href="courses/robotics.html">Robotics</a>
<a class="courses item" href="courses/drone.html">Drone Making</a>
</div>
</div>
<div class="item">
Marketing
<div class="menu">
<a class="courses item" href="courses/dm.html">Digital Marketing</a>
</div>
</div>
</div>
</div>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
<div class="menu">
<div class="item">
LogIn
</div>
<div class="item">
SignUp
</div>
</div>
</div>
<a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
<a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
<script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Its you decision but I would suggest you to keep it like this, it would llok much better.
.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;
}<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand h1" href="#">
<div class="logo">
<img src="Assets/Images/logoWhite.png" height="60px" width="47px">
<img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link nav-pills" href="index.html">Home</a>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
<div class="menu">
<div class="item">
Languages
<div class="menu">
<a class="courses item" href="courses/spanish.html">Spanish</a>
<a class="courses item" href="courses/french.html">French</a>
<a class="courses item" href="courses/german.html">German</a>
</div>
</div>
<div class="item">
Technical
<div class="menu">
<a class="courses item" href="courses/web.html">Web Development</a>
<a class="courses item" href="courses/app.html">App Development</a>
<a class="courses item" href="courses/ios.html">iOS Development</a>
<a class="courses item" href="courses/c.html">C</a>
<a class="item courses" href="courses/c++.html">C++</a>
<a class="item courses" href="courses/java.html">Java</a>
<a class="courses item" href="courses/python.html">Python</a>
</div>
</div>
<div class="item">
IOT with Robotics
<div class="menu">
<a class="courses item" href="courses/iot.html">Internet of Things</a>
<a class="courses item" href="courses/robotics.html">Robotics</a>
<a class="courses item" href="courses/drone.html">Drone Making</a>
</div>
</div>
<div class="item">
Marketing
<div class="menu">
<a class="courses item" href="courses/dm.html">Digital Marketing</a>
</div>
</div>
</div>
</div>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
<div class="menu">
<div class="item">
LogIn
</div>
<div class="item">
SignUp
</div>
</div>
</div>
<a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
<a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
<script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>