Avoid unnecessary borders in the unordered list navigation bar

After countless hours of troubleshooting, I am still unable to pinpoint the source of the border on the horizontal menu items in my website, which is built on WordPress using a child theme called Required+ (based on Zurb's Foundation). I have tried setting the border, background, padding, and margin to none, transparent, and 0 for both the main element and its children, but the annoying border persists between all menu items. Despite inspecting the CSS with Chrome's developer tools for hours, I have yet to find any leftover border settings. It seems that everything that could have been set by the parent theme has already been overridden. If anyone has any insight or suggestions, I would greatly appreciate it. Thank you!

csszurb-foundation

Answer №1

1) To improve the appearance of .navbar > li, it is recommended to remove the following properties:

.navbar > li {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; /* Remove */
border-width: 1px medium 1px 1px; /* Remove */
border-style: solid none solid solid; /* Remove */
border-color: #333333 -moz-use-text-color #333333 #333333; /* Remove */

2) Since the last <li> is selected using the :last-child pseudo-selector, it is important to adjust it separately to avoid a border on the last menu item. Therefore, the following should be removed:

.navbar > li:last-child {
border-right: 1px solid #333333; /* Remove */
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 
            1px 0 0 rgba(255, 255, 255, 0.2); /* Remove */

Refer to the screenshot below for a visual representation of the borders and box-shadow that need to be removed.

Answer №2

After investigating, I have identified the border that needs to be removed. It seems to be in the menu section. Here is the specific code snippet:

.home #container #content-wrapper #access {
   font-family: 'Museo Slab';
   width: 100%;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   background-color: rgba(236, 236, 236, 0.5);
   margin: 0;
   padding: 0;
   text-align: center;
}

You can find this border in app.css on line 101. Remove it to eliminate its display.

I also reviewed Dark's suggestion regarding the nav id="access" width adjustment. It should be updated as follows:

.eight, .row .eight {
width: 38.66667%;
}

Furthermore, I noticed that the background image on the footer is making the text difficult to read. My recommendation is to either remove the background image or create more space for clarity.

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 ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

What is the best way to reduce the spacing between subplots?

I am working on a subplot with multiple bar charts. Here is the code I have: fig = make_subplots(rows = 4, cols = 1) fig.append_trace(go.Scatter( x=[3, 4, 5], y=[1000, 1100, 1200], ), row=1, col=1) fig.append_trace(go.Scatter( x=[2, 3, 4], ...

pythoncssplotlyplotly-dashplotly-python

How can I create a CSS div with a 20px margin-top distance from the div directly above

Here is the code that I am working with: https://jsfiddle.net/kc94aq33/ I am looking to set the top margin of the .wrapper to be 20px from the bottom of the .header. Does anyone know how I can achieve this? ...

css

Move the navigation bullets of the Nivo Slider to the bottom instead of below the slider

Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider. Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within t ...

javascriptjqueryhtmlcssnivo-slider

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Utilizing personalized CSS for specific ioslides

If I decide to stick with the default data and presentation of a new ioslides, changing only the second slide (## R Markdown) without affecting the entire item, how can I do this by setting up the css document accordingly? My goal is to simply adjust the f ...

cssrioslides

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

When using CSS, the first-letter selector may appear truncated at the paragraph's edge

Having an issue with my drop caps. Visit this page for reference: In webkit, the :first-letter is getting cut off at the top, while in Firefox it is pushed down a line. Any suggestions on how to resolve this so it spans only two lines and doesn't get ...

cssfirefoxwebkittypography

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

The popover box adjusts its width to fit the contents in Chrome, however, it does not do so in

Having issues with the container width in Edge compared to Chrome despite the Sass code working fine in Chrome. Here's the code: .popover { font-family: 'Tahoma', sans-serif; max-width: 100%; box-shadow: 0 0 15px 6px #646262; ...

cssreactjstwitter-bootstrapsassbootstrap-4

What is the correct way to utilize the `<svg>` element when loading external resources?

I have gone through numerous tutorials on how to add external SVGs to a webpage... such as this one: The code I am using looks like this: <svg> <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg">& ...

htmlcsssvg

Transitioning the implicit width

Using implicit width, which involves adding padding to an element containing text to give the parent container a specific but unstated width, can be quite elegant. However, it poses challenges when it comes to transitions. Is there a way to achieve a trans ...

htmlcsscss-transitions

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

The Zurb Foundation grid system is causing issues when trying to implement vertical tabs

My vertical tabs are giving me trouble when I try to nest grid or block elements, causing everything to overflow outside the element. For example, in the image below, the numbers 1,2,3 should be in the right section. <div class="row"> <div class ...

htmltabsgridzurb-foundationzurb-foundation-5

How can I save the complete CSS file using Firebug FireDiff?

While making CSS modifications with Firebug and FireDiff, I've encountered a few mishaps where I mistakenly saved a diff instead of the complete snapshot. This resulted in uploading only one or two changes to my web server and overwriting the entire C ...

cssfirebug

Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...

cssruby-on-railserb

Is it necessary to only override the monospaced font?

Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...

cssangularangular-material

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

Troubleshooting MaterialUI: Is there a way to prevent the InputLabel text from disappearing when setting a background color on the Select component?

My goal is to change the background color on dropdown elements while keeping the default text visible. Currently, if I don't explicitly set a background color on the Select component, the text specified in the InputLabel displays correctly. However, o ...

cssreactjsmaterial-uiinline-stylescss-in-js

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...

cssletter-spacing