The menu positioned beneath the logo is malfunctioning

Upon downloading a template from the internet, I created a menu at the top with the logo positioned below it. However, when scrolling down, the menu items were supposed to turn black with a white background, resembling this:

https://i.sstatic.net/1HTLZ.jpg

Instead, the menu items appeared in black with a white background but the logo was not enclosed within the white background, resulting in this:

https://i.sstatic.net/8tIiK.jpg

Below is my header code:

<header id="header" class="transparent-header full-header " data-sticky-class="not-dark">

    <div id="header-wrap">

        <!-- Primary Navigation
        ============================================= -->
        <nav id="primary-menu" class="style-2 center">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <ul class="divcenter">
                    <li class="current"><a href="index.html"><div>Home</div></a>
                    <li><a href="#"><div>About</div></a></li>
                    <li><a href="#"><div>Services</div></a></li>
                    <li><a href="#"><div>Contact</div></a></li> 
                </ul>


        <!-- Logo
        ============================================= -->
        <div id="logo" class="divcenter">
            <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img class="divcenter" src="images/logo.png" alt="Canvas Logo"></a>
            <a href="index.html" class="retina-logo" data-dark-logo="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee2e1e9e1a3eaeffce5cebcf6a0fee0e9">[email protected]</a>"><img class="divcenter" src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adc1c2cac2ed9fd583ddc3ca">[email protected]</a>" alt="Canvas Logo"></a>
        </div><!-- #logo end -->

            </div>

        </nav><!-- #primary-menu end -->

    </div>

</header><!-- #header end -->
csshtmlnavigationbar

Answer №1

Your website's design may not be displaying correctly due to a CSS issue. Specifically, the mistake lies in having the logo div inside the content div, where the content div has a white background. To fix this, separate the two divs - make the first one with a white background and the second one transparent. This will resolve the display problem.

<div> Header // transparent
    <div>Content Div</div> // white bg
    <div>Logo Div</div>    // transparent
</div>

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

Display full lines of nested tree view HTML lists upon hovering using HTML, CSS, Angular, and Bootstrap

I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would lik ...

htmlcssangularbootstrap-4

Customizing WordPress using CSS overrides in the Pinboard theme

I'm currently customizing a WordPress theme for my website (pinboard theme) and so far, it's been an amazing experience. One of the features of this theme is a built-in slider/carousel. However, I am looking to change the title of the slider from ...

csswordpress

Can you explain the distinction between <P> and <p> tags in HTML?

Currently, I am examining HTML documents by parsing them through Java and I have noticed that the p tag is one of the most frequently utilized tags. While I understand that it is used to create a new line, I am puzzled by the fact that in some documents I ...

html

Can ASP.NET display a "Server Error in '/' Application" message specifically when utilizing the <asp:RequiredFieldValidator>?

I recently encountered an issue with my code that involves displaying a message followed by a text box and a Required Field Validator: <asp:Content ID="Content1" ContentPlaceHolderID="cphMainContent" Runat="Server"> <div id="MainContent" style="w ...

c#asp.net.nethtml

Page for Calling with jQuery Mobile

How can I navigate to the administrator page while also refreshing the page? The concept is: If the user logs in successfully, the page will automatically redirect to the administrator page using HTML5 storage for data. For example: sessionStorage.setIte ...

jqueryhtmljquery-mobile

Discovering if a page can be scrolled in Angular

Hey there, I recently started working with Angular and created an app using the angular material stepper. The issue I'm facing is that some of the steps have longer content, causing the page to become scrollable. I am now trying to find a way to deter ...

javascriptcssangulartypescriptangular-material

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...

htmlcssbrowserinternet-explorer-9flexbox

What is the best way to toggle between CSS rules on the left and right using jQuery?

I've incorporated a CSS class by using the following code: .dropdown-menu{right:0;} However, now I want to change the CSS property on the client side to: .dropdown-menu{left:0;} ...

jquerycss

The navbar seamlessly adapts to the screen size, maintaining its responsiveness even when utilizing the .container class within Asp.Net MVC

I'm relatively new to ASP.NET MVC. Currently, I'm facing an issue with the navbar in my partial view for the shared layout. Despite adding the .container class from Bootstrap, the navbar doesn't conform to the screen size as expected. My a ...

asp.net-mvchtmlnavbarpartial-viewsbootstrap-4

Disarrayed image in absolute position on my webpage

I have a website with an auto-resizing background, but I am struggling to have a fixed black bar at the bottom of the page. Everything looks good when the browser window is maximized, but as soon as you scale it down and start scrolling, the black bar alm ...

htmlxhtmlcss

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

What could be the reason for the unexpected behavior of position sticky?

I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...

htmlcsscss-position

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

jqueryhtmlcssajax

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick

Performance rating - Displaying the overall rating

http://jsfiddle.net/q8P7Y/ I am currently facing an issue with displaying the final score at the end of a project. There are multiple approaches I can take to solve this problem, but I am unsure of the best way to proceed. In my current setup, the next b ...

javascriptjqueryhtml

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

javascriptjqueryhtmlurlwindow.location

Incorporate content from HTML into various sections

Is there a way to dynamically extract the h4 headers and the first sentence from each section of this HTML, and then add them to a new div? function summarize() { let headings = document.getElementsByTagName("h4"); // Get all H4 elements let newsText = do ...

javascripthtmldomappendappendchild

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

javascripthtmlcss

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe