Issue with Resizing: Custom Icons Drifting from Right Side of Header

My header is a bit messy. I wanted it to be based on the full-width image without changing its height. To achieve this, I floated the header image to the left and created a div that filled in the color of the image across the entire page. After that, I added three images on the right side of the header.

However, my problem arises when the window is resized - the icons get pushed under the header image, thereby pushing the fill-colored div below the image. You can see the issue by following this link:

http://jsfiddle.net/theflyingmouse/RaPeG/1/


    <header id="masthead" class="site-header" role="banner">
        <div class="header-background">
            <div class="new-header">
                <a href="http://chrispicco.ca/" rel="home">
                    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/copy-header-alter.png" width="1074" height="90" alt="">
                </a>
                <a href="https://www.facebook.com/pages/Chris-Picco/10992716035">
                    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-facebook-5-icon-48-e1382731781591.png"></a>
                <a href="http://www.youtube.com/user/ldrmusicnl">
                    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-youtube-5-icon-48-e1382731895640.png"></a>
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f363139301f3c372d362c2f363c3c30713c3e">[email protected]</a>">
                    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-email-10-icon-32.png"></a>
            </div>
</div>

<nav id="site-navigation" class="main-navigation" role="navigation">
    <h1 class="menu-toggle">Menu</h1>
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <div class="menu-main-navigation-container">
        <ul id="menu-main-navigation" class="menu">
            <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5"><a href="http://chrispicco.ca/">Home</a></li>
            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://chrispicco.ca/about/">About</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://chrispicco.ca/music/">Music</a></li>
            <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://chrispicco.ca/lyrics/">Lyrics</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://chrispicco.ca/videos/">Videos</a></li>
            <li id="menu-item-93" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-93"><a href="http://www.youtube.com/user/ldrmusicnl">Youtube Channel</a></li>
            <li id="menu-item-94" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-94"><a href="https://www.facebook.com/pages/Chris-Picco/10992716035">Official Facebook Page</a></li>
        </ul>
    </div>      
</nav><!-#site-navigation-->
</header>

Here's some CSS to go along with it:


.header-background {
    background-color: #d8edde;
    width: 100%;
    height:100px;
}

.main-navigation {
    background-color: #d8edde;
    width: 100%;
    margin-bottom: 25px;
    box-shadow: 0px 2px #ADBEB2;}
csshtmliconscss-float

Answer №1

It seems that the issue with your logo dropping is due to its larger size (1074px) than necessary. To resolve this, consider cropping it down to the required width of about 475px. However, keep in mind that it may still cause the icons to drop when the screen size reduces further.

If you want to ensure that the icons stay in the top right corner, you can position them absolutely within a div container as shown below.

HTML

<div class="social-container">
    <a href="https://www.facebook.com/pages/Chris-Picco/10992716035">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-facebook-5-icon-48-e1382731781591.png"></a>

    <a href="http://www.youtube.com/user/ldrmusicnl">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-youtube-5-icon-48-e1382731895640.png"></a>

    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e373038311e3d362c372d2e373d3d31703d3f">[email protected]</a>">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-email-10-icon-32.png"></a>
</div>

CSS

.social-container {
  position: absolute;   
  top: 20px;
  right: 20px;
}

You can view an updated fiddle demonstrating this solution here.

Answer №2

employ % for every div tag within the header section

#header{
 width:100%;
 margin:0px;
 padding:0px;
}

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

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

javascriptjqueryhtml

Can object methods be called using inline event attributes in an HTML tag?

Exploring the depths of core JavaScript has been my latest obsession. It's fascinating how we can easily trigger functions within the global context using events like this. HTML <span class="name" onclick="clicked()">Name</span> JavaSc ...

javascriptjqueryhtml

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

How can I use Angular 7 to create a background image for a View made up of multiple components?

Here is the HTML code that I am working with: <app-navbar></app-navbar> <router-outlet></router-outlet> My goal is to have an image set as the background for the home view, which consists of two components: navbarComponent and hom ...

htmlcssangularbootstrap-4angular7

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

Display the table by pressing the button

Check out my code below <script> $(document).ready(function(){ $("button").click(function(){ $("table").toggle(); }); }); </script> <!--Code for the Technical Specifications Button--> <div ...

jqueryhtmlcss

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

phpjavascriptjqueryhtmlgoogle-visualization

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

htmlcssfooteroverlapsticky

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

Tips for refreshing the CSS cache in Symfony2 production when the content has been updated

When minifying the CSS in production (using php app/console assetic:dump), the file is recreated but the name remains the same. As a result, users' browsers continue to cache the old version. One workaround is to add a parameter like ?v=12 after the ...

phpcsssymfonycaching

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

javascriptcssreactjsmaterial-ui

What is the best way to include dynamic arguments using template literals?

Looking for assistance with a piece of code function createAnswerElement(answer, index) { const key = `${answer}-${index}`; return ` <p class="delete" onclick=someSillyFunc(${key})>x</p> `; } function someSillyFunc(key) { cons ...

javascripthtmlwebtemplate-literals

Webpage with visual representation

Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption i ...

htmlcss

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

javascripthtmljquerycss

Step-by-step guide to creating a dropdown menu within a form element, with a variety of selectable values generated in

I am dealing with an array of employees who are assigned tests by a Lead. When tests are being assigned, the selected employee is allocated correctly. Upon review, the Lead can easily see which test is assigned to each employee. However, when the table is ...

htmlangular

There are various reasons why React components do not utilize explicitly defined styles

I've encountered a puzzling issue while working on a React component that includes other components. Despite specifying styles in the parent component for its children, the specified styles are not being applied. Strangely enough, when I enclose the c ...

javascripthtmlcssreactjs

Having trouble switching tabs on Bootstrap 4.3 beyond the first tab?

I have integrated bootstrap tabs into my web app by following the documentation provided on the bootstrap website. While I have successfully achieved the fade animation for the first tab, I am facing issues with getting the other two tabs to function prop ...

htmlasp.netbootstrap-4

Placeholder information is not displaying correctly on Bootstrap 5.2

I am currently working on a webpage using Bootstrap 5.2 and have the following code snippet included: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa3bfa ...

cssbootstrap-5