Unpredictable growth of stationary primary navigation bar

Although I am not very experienced in coding, I recently managed to create a blog using Blogger. However, while trying to customize it further, I encountered an issue with my main navigation bar. The problem arises when scrolling down the page, the navigation bar expands and covers the posts below, which is quite frustrating.

I also noticed that the three-line navicon ("fa fa-bars") was not centered properly within the bar. After inspecting elements in my browser, I discovered that the container box ("indzign-box") was misplaced.

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

Could it be that the container box is causing the irregular expansion of my navbar or is there something else at play? And more importantly, how can I fix this issue?

/* Main Navigation */
nav.fixnavbar{position:relative;display:block;width:100%;background:#778595;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
.fixednav{position:relative;margin:0 auto;padding:0;max-width:1010px}
.fixednav li{display:inline-block;}
.fixednav li a{display:inline-block;padding:20px;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;}
.fixednav li a:hover{background:#6c7a89;color:#fff}
.nav-icon{display:none}
nav.fixnavbar.main-nav-scrolled{position:fixed;top:0;left:0;opacity:.97;-webkit-transform:translateZ(0);transform:translateZ(0)}

/* Box Info */
.fixednav li.indzign-box{color:rgba(255,255,255,1);z-index:2;font:normal 24px FontAwesome;cursor:pointer;float:right;display:inline-block;padding:18.5px 20px;transition:all 0.5s ease-out}
.icon-box{background-color:rgba(66,133,244,0.8);padding:8px 13px;border-radius:100%;color:rgba(255,255,255,0.5);margin-right:5px}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notif-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;cursor:pointer;text-align:left}
.notif-info:hover{opacity:0.8}
.notif-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px}
#indzignbox{background:#fff;color:#333;font-size:13px;top:-381px;right:306px;padding:20px;position:fixed;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:100;transition:all .5s}
#indzignbox .closebox{background:none;color:#999;padding:4px 6px}
<nav class='fixnavbar'>
  <button class='nav-icon-position nav-icon' type='button'>
    <span class='icon-line'/>
    <span class='icon-line'/>
    <span class='icon-line'/>
  </button>
  <ul class='fixednav' id='togglemenu'>
    <li><a href='/'>Home</a></li>
        <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars'/></li>
    <li><a href='/search/label/list'>List bài viết</a></li>
    <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
    <li><a href='/search/label/review'>Gundam Reviews</a></li>                        
  </ul>
</nav>

Thank you in advance!

cssnavbarblogger

Answer №1

The issue at hand stems from the padding settings within the .fixednav li.indzign-box CSS selector.

To resolve this problem, simply adjust the padding values from padding:18.5px 20px; to padding:8px 20px;

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

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

htmlcsstailwind-css

What is the significance of duplicate IDs causing errors in an HTML5 exam?

Here is some HTML code that I'm working with: <span> <a href="#"> <span class="caption"> <p id="first">Text1</p> <p id="desc">click to read</p> </span> ...

csshtml

Getting rid of the outline on <html> while tabbing in Firefox

An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera. To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed: >>> d ...

htmlcssfirefoxtabsoutline

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

htmlcssmobileviewport

Disabling Scrolling in AngularJS Material Tab Components

I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...

javascripthtmlcssangularjs

What is the reason behind the inability to set a maximum width for containers?

Here's a piece of XML code that I'm working with, and I need to figure out how to set the max width for the linear layout to 600dp. Why is it that Android doesn't allow this kind of customization? EDIT: The main question here is not about h ...

androidxmlandroid-layoutcss

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

What are the steps to create a reliable menu?

Looking to add a fixed menu to my website that stays at the top even when scrolling down the page. For an example, check out iplex.co.in for a demonstration. ...

htmlcssmenu

A guide to efficiently filling multiple rows of images with different heights while preserving their aspect ratio

I am facing a design challenge that I believe can be solved using CSS, although it might require some Javascript. My issue involves a gallery of images with varying sizes and proportions. I would like to achieve the following: Distribute the images in m ...

htmlcssflexboxgalleryimage-gallery

How to style two distinct elements within an HTML select tag option

Within my PHP script, I am retrieving a table with two columns from the database and presenting them in a dropdown list. Below is the code snippet: echo "<select id='isv' class='required'>"; while($row = pg_fetch_row($result)){ ...

phphtmlcss

CSS: Struggling to remove overline text-decoration

I'm encountering an issue where I can't remove text-decoration from the first letter using the p::first-letter selector. Even with the CSS properties properly set, it doesn't seem to work. p::first-line { font-weight: bold; text-decorat ...

htmlcss

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

javascripthtmlioscssios-simulator

Tips for maintaining the size of child elements in a Bootstrap collapse as it collapses

I'm currently working on a page that requires a collapsible element using Bootstrap horizontal collapse. Within this collapsible element, there is a table that seems to squish and increase in height as the collapse animation occurs. The transition app ...

htmlcsstwitter-bootstrapbootstrap-5

The margin will not cave in because of the padding of its parent element

Is there a way to showcase the <blockquote> element in a unique color without it tightly enveloping the text? I tried using the background-color CSS property, but unfortunately, the colored box of the <blockquote> element ended up fitting too c ...

csspaddingmargin

Using a background image in a React component

Currently, I am working on a webpage and facing an issue while trying to set a background image for a Material UI element using the background-image CSS property. Despite researching online for solutions, I am unable to make the image appear. P.S.1: I eve ...

javascripthtmlcssreactjsmaterial-ui

Displaying a trio of items in a horizontal row on the page

I am currently working on displaying a list item with three data elements positioned next to each other. My goal is to achieve the following layout: https://i.sstatic.net/XiFzE.png However, at the moment, my list appears like this with the circle distort ...

javascriptcssreactjs

What are some techniques for creating an HTML element that remains fixed on the page after scrolling past a certain height, even though it is originally part of

I am trying to achieve a specific effect with a <section></section> element on my web page. Once the user scrolls past the section, I want it to remain fixed at the top of the screen even as they continue scrolling downwards. This is in an Ang ...

javascripthtmlcssangular

issues with compass importing images

I'm struggling to understand how the directory structure functions. The setup I have is as follows: --compass --css --images --frontSprite Images -sass --_base.scss --advertiser.scss config.rb When ...

cssrubysasscompass-sass

Creating a webpage with a CSS layout that features a div element containing a text area

Seeking guidance with my limited understanding of html/css on creating a div layout for a form, as depicted in the image below: https://i.sstatic.net/Hl8k3.jpg My attempt resulted in quite a mess, so I'm looking for advice on the best approach to im ...

htmlcss

What is the most efficient way to create a smiley face emoji box using HTML?

I want to incorporate a box with smiley icons above the comment section that opens with a click using jQuery. Here's what I have come up with: <div class="emo"> <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&a ...

htmlcss