Problem with CSS/SASS dropdown navigation bar

Having trouble with a design issue, I have successfully recreated the Twitter navigation bar and now I want a dropdown menu to appear when hovering over the 'settings' text. However, I'm facing difficulties as the overflow is hidden in the navigation bar. I also want the dropdown to stay fixed under the settings text but can't seem to figure it out. Take a look at the Codepen link below for reference.

HTML

<nav class="userNav">
   <div class="navCenter">
      <ul class="rightUL navRight">
         <li><a href="#">settings</a></li>
      </ul>
   </div>
</nav>

SASS

.navRight
    float: right

// Main signed in nav that user can see when they log in

.userNav
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 60px

    background-color: white
    overflow: hidden

    .navCenter
        max-width: 1280px
        margin: 0 auto

        .rightUL
            display: inline-block
            padding: 12.5px 0 0 0 

            li
                display: inline-block
                padding-right: 10px

                a
                    color: #5A5A5A
                    text-decoration: none
                    vertical-align: -5px

                    &:hover, &.active
                        color: #21AAEA

Take a look at the Codepen example for more information.

Answer №1

To enhance the navigation experience, it is recommended to relocate ov: hid from nav to leftUL and incorporate a dropdown in settings ~ li with pos:absolute positioning. A basic dummy dropdown has been included for your reference, feel free to customize it according to your preferences. Should you require any assistance, do not hesitate to reach out.

Here's the code snippet:

HTML

<nav class="userNav">
                <div class="navCenter">
                    <ul class="leftUL navLeft">
                        <li><a href="#"><i class="icon-home"></i> <span>Home</span></a></li
                        ><li><a href="#"><i class="icon-globe"></i> <span>Notifications</span></a></li
                        ><li><a href="#"><i class="icon-envelope"></i> <span>Messages</span></a></li
                        ><li><a href="#" class="active"><i class="icon-user"></i> <span>Me</span></a></li>
                    </ul>
                </div>

                <div class="navCenter">
                    <ul class="rightUL navRight">
                        <li class="search">
                            <form>
                                <input type="search" placeholder="Search Meeu">
                                <i class="icon-search"></i>
                            </form>
                        </li>
<li class="has-drop">            
                          <a href="#">settings</a>
                            <div class="drop">
        <ul>
          <li><a href="#">menu</a></li>
          <li><a href="#">menu</a></li>
          <li><a href="#">menu</a></li>
        </ul>
 </li>
                        </div>  
                    </ul>
                </div>

SASS

 =placeholder 
  &::-webkit-input-placeholder
    @content

  &:-moz-placeholder
    @content

  &::-moz-placeholder
    @content

  &:-ms-input-placeholder
    @content
body
  font-family: sans-serif

.navLeft
  float: left

.navRight
  float: right

// Main signed in nav that user can see when they log in

.userNav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 68px

  background-color: white

  +single-box-shadow(0, 0px, 1px, 1.5px, rgba(0,0,0,0.1))

  .navCenter
    max-width: 1280px
    margin: 0 auto

    .leftUL
      display: inline-block
      padding: 18px 0 0 0
      overflow: hidden

      li
        display: inline-block

        a
          padding: 30px 12px 15px 12px

          border-bottom: 4px solid #5A5A5A
          color: #5A5A5A
          text-decoration: none

          +single-transition(all, .15s, ease-in-out)

          &:hover, &.active
            padding-bottom: 11px

            border-color: #21AAEA
            color: #21AAEA

          i
            font-size: 24px

          span
            font-size: 14px
            vertical-align: 4px

    .rightUL
      display: inline-block
      padding: 12.5px 0 0 0 
      .has-drop
        position: relative
        &:hover
          .drop
            display: block

      .drop
        display: none
        position: absolute
        top: 100%
        right: 0
        width: 150px
        background: blue
        padding: 20px
        border-radius: 10px
        li
          display: block
        a
          color: #fff

      .search
        display: inline-block

        form

          i
            position: relative
            left: -32px

            color: #292f33
            font-size: 14px

          input
            width: 200px
            height: 35px
            padding: 0 35px 0 10px

            border: 1px solid #e1e8ed
            outline: none
            font-size: 12px
            line-height: 1
            background-color: #f5f8fa

            @include placeholder
              padding: 2.5px 0 0 0 
              color: #292f33

            +border-radius(21px)
            +single-transition(background-color, .15s, ease-in-out)

            &:focus
              background-color: transparent

              @include placeholder
                color: #8899A6

      li
        display: inline-block
        padding-right: 10px

        a
          color: #5A5A5A
          text-decoration: none
          font-size: 14px

          +single-transition(all, .15s, ease-in-out)

          &:hover, &.active
            color: #21AAEA

CodePen Link

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

React does not support having two :focus selectors on a single JSX element

I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React J ...

Tips on switching the direction of the ripple effect on this button code from left to right

Link to button Code Hi there, I'm not very familiar with CSS. Can someone help me create a ripple effect on this button that starts from the right side and moves towards the left? Basically, I want to change the direction of the ripple effect. .butto ...

Eliminate all HTML code between two specific markers

Is there a way to effectively delete all the HTML content located between two specific strings on a webpage, regardless of their positions and the content in between them? For example, <div class='foo'> <div class='userid'& ...

issues stemming from the css of leaflets

This is my first time using leaflet and I am encountering a CSS issue. I'm not sure if there is another CSS file for leaflet, but whenever I try to adjust its position, it changes unexpectedly. I have a floating nav bar that should appear when scroll ...

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...

A picture resting on the left side of the text

I'm struggling to align images to the left of text within a div. When the screen is smaller than 768px, I want the images to stack on the left side of the text, with a maximum width of 150px. I've tried using float: left and adjusting the displa ...

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

CSS: When using the float: right property, the container does not grow to

I'm having trouble with expanding the comment body that is floated to the right, as my container doesn't expand along with it. Any tips on how I can resolve this issue? For a clearer understanding, please refer to this link: http://jsfiddle.net/ ...

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

Flexible DIV Grid Design with Overlapping Absolute Div Elements

My goal is to replicate the layout shown in this screenshot view screenshot here I want the layout to be responsive, with DIV B moving below DIV A when the screen is resized. DIV B is positioned absolutely to cover content and DIV C. Both DIV C and DIV ...

Nginx fails to load CSS in Asp.net Core on Raspberry Pi

First and foremost, thank you for taking the time to read my post. Secondly, I apologize for any language errors in advance. I am currently attempting to run an Asp.net core application on a Raspberry Pi, but I am encountering difficulties with nginx prox ...

Tips on how to center an image within a table cell:1. Insert the image

I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML ...

Adapting Bootstrap components based on the screen size: Viewport-driven

Check out our Custom Sizing Solution, designed to offer sizing options tailored to different devices and viewports. Here's what we can do: For small devices, the width will be set at 100% For larger devices, the width will be adjusted to 75% For ext ...

Getting Bootstrap column width using SASS

Is there a way to make a title in one column overlap the next column without relying on position:absolute in CSS? I want to maintain the width of the title to be as wide as the col-8 column in Bootstrap, while keeping it proportional for smaller screens. A ...

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos. Here is my current code: $('#addPhotosBtn').click(function() { $(this).parents().find('#addPhotosInput').click(); }) ...

Dropdown menu with CSS arrow

I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...

Tips for enhancing the presentation of JSON information

I recently ventured into the world of JSON and JS, managing to create a JSON file to showcase data using .onclick event. While I have successfully generated and displayed the JSON data on screen, my next goal is to present it in a table format for better c ...