The top border is not visible on the entire length of the navigation bar on smaller screens

Link to the website in question:

website

The navbar links collapse into a hamburger menu dropdown on smaller screens, and I have added a CSS property for the top border 

.navbar { border-top: 3px solid rgba(55,175,75,1.00); }
. However, when the screen size is reduced, the hamburger menu button seems to be overlapping the green border at the top of the navbar!

I've tried various solutions, such as adjusting margins to lower the button (which also results in overlap of the bottom border), removing background-color, or making it transparent using rgba(0,0,0,0.00), but so far nothing has worked...

If you have any suggestions or ideas on how to fix this issue, they would be greatly appreciated.

Here's a visual of the problem:

https://i.sstatic.net/LGuac.png

The green top border doesn't extend across the entire length of the navbar, giving the impression that the white background of the hamburger menu button is covering part of the navbar's top border.

htmlcssbootstrap-4

Answer №1

Include

margin-top: 0px;
height: 100%;

For the hamburger symbol.

Answer №2

Include:

padding-left: 0.3px;
width: calc(80% - 10px);

for the navigation sidebar symbol.

Answer №3

Visiting your website allows me to effectively solve any issues you may have. To adjust the spacing, I recommend adding padding-top to .navbar and reducing the padding-top within .navbar a as shown below:

.navbar {
    width: 100%;
    height: 75px;
    padding-top: 2px;
    z-index: 2;
    /* background-color: rgba(255,255,255,0.85); */
    /* border-top: 2px solid rgba(55,175,75,1.00); */
    border-bottom: 5px solid rgba(55,175,75,1.00);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.navbar a {
   float: left;
   font-size: 16px;
   text-align: center;
   text-decoration: none;
   color: rgba(55,175,75,1.00);
   padding: 30px 16px 11px 16px;
   transition: 0.25s;
   transition-timing-function: ease-in-out;
}

I suggest adding padding-top: 2px to .navbar and adjusting the padding values from 33px 16px 11px 16px to 30px 16px 11px 16px

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

Keep the footer firmly attached to the bottom of the page, even as the contents shift and change

Having an issue with my HTML pages where the footer is not sticking to the bottom when there is vertical scroll due to excessive content. Here is the basic layout of my pages: <body> <div id="container"> <div id="header"> Hea ...

htmlcss

Dealing with the dilemma of Two AjaxButtons enclosed in individual forms in Wicket

I am trying to incorporate two separate file upload sections on a single page - one for images and another for other types of files. Each section includes a form with an AjaxButton. Initially, I successfully set up the first section, which functioned as in ...

javahtmlajaxwicket

AdminLTE-3 Bootstrap-4 sidebar menu with dynamic AJAX functionality fails to toggle treeview open/hide after page is fully loaded

I am looking to update the sidebar menu dynamically in the adminlte 3 dashboard with bootstrap 4 using AJAX calls. However, I have run into an issue where the menu open/close functionality is not working when the data is loaded dynamically using AJAX. On t ...

javascriptjqueryajaxbootstrap-4adminlte

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

javascriptcssreactjsdatagridmaterial-ui

What is the best way to change the heading text and color in React based on the time of day when calling a function?

I want to dynamically change the text and color of my h1 heading based on the time of day. I'm encountering an error with my current code: "Cannot set property 'innerText' of null". I've tried to figure out how to incorpor ...

javascripthtmlcssreactjsjsx

What is the best way to include a dropdown menu in a navigation bar?

I am looking for guidance on adding a dropdown menu to my navbar in place of the "social media" section. Below is the code snippet I have been working with: <span class="navbar-toggler-icon"></span> </button> <div class="co ...

htmlcssdrop-down-menunavbar

Unable to display selected file in Angular File Input

Currently, my focus is on learning about Angular. My first task is to create a simple file upload feature. Even though I have set up my Web API and added a file select option, I'm facing an issue where the selected file is not being displayed. Atta ...

angularbootstrap-4bootstrap-file-input

Random image generator using jQuery on the home page body

Hey guys, I'm working on a cool feature for my Wordpress site where a random background image loads every time the homepage is refreshed. Check out the code snippets below: First, here's what I have in my style sheet (style.css): body.home { ...

phpjqueryhtmlcsswordpress

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

cssmaterial-ui

The functionality of hover and custom attribute is not operational on IE8

Unfortunately, I am facing issues with the hover and custom attribute functionality in IE8. Even in compatibility mode, it refuses to work properly. The code snippet provided (fiddle) works perfectly fine on Mozilla, Opera, Safari, and Chrome but encounter ...

jqueryhtmlcssinternet-explorer-8hover

What is the best way to display the information contained within a .nfo file on a website?

Does anyone know of a plugin or code that can display the content of a .nfo file on a webpage (html or php)? I want to create multiple web pages with individual .nfo files, but I'm not sure if this is achievable through coding or if there's a scr ...

phphtmlwebviewer

Use two HTML forms, each one only submitting its own form for validation

Managing two forms on a single page can be tricky. One form is specific to the current page, while the other is a side form that appears on every page. I've successfully implemented a validator to highlight incomplete fields with red boxes for the fir ...

phpjqueryhtmlformsvalidation

Removing an object from a THREE.js scene while eliminating the Ray effect: Tips and tricks

function collisionDetection(bullet, b){ for(var i = collidableMeshList.length-1 ; i>=0; i--){ var collideMesh = collidableMeshList[i]; var v = collideMesh.geometry.vertices[0]; var c = collide ...

htmlwebglthree.js

Toggle the visibility of text boxes based on the checkbox selection

After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...

javascriptjqueryhtml

What is the method for aligning the cursor in a text input field with a placeholder in Edge without using JavaScript?

Does anybody have a solution for making this work in all browsers, except for Edge? I'm looking for a pure CSS workaround. input { text-align: center } <input placeholder="placeholder" /> ...

cssmicrosoft-edge

Tips for integrating PHP with HTML5 while developing a Blackberry native application that utilizes Blackberry websockets

I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...

htmlblackberry

Is it possible to harness the power of a Typescript array within my HTML while incorporating primeng chips?

My subject line brings up a question: How can I transform the following piece of HTML code? HTML <p-chip label="1 day(s)" styleClass="p-mb-2 p-mr-2 custom-chip"></p-chip> <p-chip label="2 day(s)" styleClass=&qu ...

htmlangulartypescriptprimeng

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Tips for modifying link height using CSS

I'm currently facing an issue with adjusting the height of "footer a" links that are using Fontface vector icons in the footer. I have added a red border around them to visually identify the problem. Ideally, when navigating through the links, the bor ...

htmlcsshyperlinkfooter

How to use Python Selenium to locate the parent element

Here is a snippet of my HTML code: <li> <div class="level1"> <div id="li_hw2" class="toggle open" </div> <ul style="" mw="220"> <li> <div class ="l ...

pythonhtmlseleniumxpath