Arrow navigation at the bottom of CSS selected items

I'm struggling to create a CSS-styled navigation bar with a white arrow pointing upwards at the selected item. The challenge is making sure the arrow stands out from the background and aligns properly with the text box. It should look similar to this image:

Does anyone have any tips on how to implement a "selected" CSS style for the navigation item, as seen in the example above?

I am attempting to use a CSS class called "activate", so 

<li class="activate"><a href="#">Overview</a></li>
creates the arrow effect. Here is the progress I've made so far in this jsfiddle link: https://jsfiddle.net/v680tfvr/. It's somewhat functional, but there are issues with the hover highlighting being too large, and an extra arrow appearing near the top. It seems like a simple fix, but I can't seem to figure it out!

htmlcsscss-shapes

Answer №1

After making some adjustments, the following changes have been implemented:

  • Resolved the Border issue
  • Corrected the heading styling
  • The mysterious element no longer appears on hover

Code Snippet

.submenu {
    height: 40px;
    overflow: hidden;
}

.submenu .activate:after {
    content: '';
    position: relative;
    width: 0;
    height: 75px;
    left: 40%;
    top: -39px;
    border-left: 10px outset transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
}

Fiddle Link: https://jsfiddle.net/v680tfvr/5/

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

Tips for centering text vertically in an input box specifically for Internet Explorer (IE)

Here is the code I am working with: <input type="text" class="contactInput" value="my string"> .contactInput { border:0; margin:0; padding:0; background-color:#000000; color:#ffffff; height:22px; width:290px; padding ...

htmlcssinternet-explorer

What does the term "root element" refer to in the Material-UI documentation?

I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...

htmlcssreactjsmaterial-ui

Set up the bs-timepicker to use Coordinated Universal Time (UTC

I'm having trouble initializing a timepicker using the code below (source: ). The issue is that it keeps initializing with local time instead of the time I specify. Can you help me identify what I might be doing wrong? html <input id="txtContrSta ...

javascripthtmlangularjstwitter-bootstrap

Embeddable video player failing to adjust size properly within parent div

I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...

cssiframeresponsive-designskeleton-css-boilerplate

Is there a way to delete the header box in IPBoard?

Recently, one of our team members working on the website decided to go rogue and sneak in a large box featuring a Dremel ad. Unfortunately, I am clueless when it comes to removing it. The website is self-hosted with full admin access. ...

phphtml

Styling using CSS works seamlessly with jsfiddle, but seems to encounter compatibility issues when applied directly in an HTML file. Interestingly, the CSS properties

I'm having trouble with table formatting in Chrome and Firefox. The TR style is not being applied when I load the file into the browser, even though the table and TD styles are working correctly. Interestingly, if I use the code in a fiddle it works ...

htmlcss

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

javascriptcsslayoutresponsive-design

The absence of image input was evident in the POST request

Within my Django template, I have an input field linked to a Django ImageField. Once rendered, the HTML code appears as follows: <form action="/accounts/username/" method="post" id="profile_form" enctype="multipart/form-data"> &l ...

htmldjangopostdjango-templates

Stopping smart highlighting on mobile email clients like Outlook

After sending a test email to Outlook and opening it in the Outlook iOS app, I noticed that the default style of the text for dates/times appears with its own color. https://i.sstatic.net/iydYd.png (The white/gray part is only to conceal the text, reveal ...

cssoutlookhtml-emailmjml

break LineSegment at specified location

Using the vertex positions provided below, I am creating a square using THREE.LineSegments (or even by a simple THREE.Line.) vertices: path.vertices = [ new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ), new THREE.Vector3( 10.6000061 ...

javascripthtmlthree.js

Is Chrome not correctly using 100% viewport width (vw)?

I've been attempting to recreate the functionality of this codepen, and I've encountered an issue with the vw declaration in Chrome. Despite setting GalleryGrid to 100vw, it doesn't display correctly in Chrome, while Firefox and Safari work ...

htmlcssgoogle-chromeviewport-units

Using Javascript to access element that was dynamically created by using getElementById

Exploring Javascript has been a fun hobby of mine, but I've hit a roadblock when trying to access dynamically created elements with another function. Here's the scenario: I have a link that generates dropdown selects with options when clicked. T ...

javascripthtmldynamic

How to create a circular element with horizontal alignment using CSS in a Bootstrap

Looking to center a CSS circle with an image and label overlay in the circle while ensuring it stays horizontally centered in a bootstrap column. Any tips or suggestions are appreciated. For reference, please visit this JSFIDDLE link <div class="conta ...

csstwitter-bootstrap

Maintain the flow of a floated or absolutely positioned element using CSS

Is there a way in CSS to ensure that floated or absolutely positioned elements remain within the flow? I find it frustrating that CSS lacks something like flow:on and flow:off to control this. The main issue I am facing is with having a div element of var ...

csscss-floatabsolute

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

Steps to create a floating navbar using tailwindcss

Here is the code snippet for the site header component: export function SiteHeader() { return ( <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60&qu ...

csstailwind-css

What is the reason that in Bootstrap, the buttons become full width when using "fixed-bottom," even though they are not full width without it?

My goal is to have 1 button positioned near the top and 2 buttons fixed at the bottom. However, when I add the fixed-bottom` class to the div containing the bottom-fixed buttons, it causes them to span the full width of the container. This results in the b ...

cssflexboxblazorbootstrap-5

Using Javascript to navigate links in a list using keyboard arrow keys

When links are not wrapped in other elements, I am able to change focus easily. Here is how it works: HTML <a id="first" href="#" class='move'>Link</a> <a href="#" class='move'>Link</a> <a href="#" class=&a ...

javascriptjqueryhtmlnavigationfocus

What could be the issue causing my code to not properly update CSS properties?

My jQueryMobile project involves overriding the CSS for listviews with the following code: li{ height:90px !important; border-style: 0px !important; border-width: 0px 5px 2px 0px !important; -moz-border-image: url('images/FA-iPhone_my-goals_READY-(2) ...

jqueryhtmlcss

Utilizing HTML templates in Express instead of Jade

Currently in the process of setting up a new MEAN stack project, with Angular as my chosen front-end framework. I am aiming to utilize HTML files for my views in order to incorporate Angular within them. However, I am facing challenges when attempting to s ...

javascripthtmlangularjsnode.jsexpress