Website Design: Logo and Banner Alignment Issue, Navigation Bar Not Responsive

Struggling with my responsive website, I am facing two issues. Firstly, the banner is wrapping below the logo, creating an undesirable layout. I aspire for a design similar to the St. Louis Zoo website, where the logo and banner image stay aligned even on smaller screens. How can I achieve this seamless display?

Secondly, as the page size decreases, the navigation bar becomes messy with the "contact" link overlapping the other links. This inconsistency is not visually pleasing. How can I resolve this issue - tweaking the Global Styles or adding more CSS to the Tablet Section?

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Artistic Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>

... (HTML code continued)

CSS:

*{box-sizing:border-box;}

... (CSS code continued)

UPDATE: Combining the logo and banner into a single image is not feasible as the logo needs to remain a clickable link to the homepage.

htmlcssresponsive-designnavbanner

Answer №1

See it in action

Check out both solutions in action:

.wrapper{
  width: 400px;
  margin: 0 auto;
}
#banner{
  margin: 0 auto 10px;
}
#banner header h1{
  margin: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#banner header h1 .top-sections{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.navigation{
  text-align:center;
  background-color:#000000;
  padding:11px;
}
nav{
  margin:auto;
  height:auto;
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: space-around;
  font-family: Arial;
}
nav li{
  padding: 10px;
  margin-bottom: 7px;
  background-color :#000000;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
nav li:hover{
  background-color: #8E8E8E;
}
nav a{
    text-decoration:none;
    color:white;
    font-size: 10px;
}
nav a:visited{
    color:white;
}
<div class="wrapper">
    <div id="banner">
        <header>
            <h1>
                <a class="top-sections" href="index.html">
                    <img class="banner" src="https://placehold.it/73x50/000000/FFFFFF?text=Logo" alt="logo">
                </a><!--
                --><img class="top-sections banner" src="https://placehold.it/325x50/000000/FFFFFF?text=Banner" alt="banner">
            </h1>
        </header>
    </div>
    <div class="navigation">
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="projects.html">PROJECTS</a></li>
                <li><a href="#">STORE</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
   </div>
</div>

Answer №2

Solution to the initial query

In order to display your images and anchors side by side, you must ensure that they are within div containers and assigned appropriate grid system classes to control their width based on your layout requirements.

<header>
   <div class="row">
     <div class="col-3">
       <h1>
         <a href="index.html">
           <img class="banner" src="images/Artistic_Logo2.png" alt="logo">
         </a>
       </h1>
     </div>
     <div class="col-9">
       <img class="banner" src="images/Artistic_Banner2.png" alt="banner">
     </div>
   </div>
</header>

To ensure responsive behavior, set a max-width of 100% for all images:

img {
 max-width: 100%;
}

This will allow the images to adjust to different screen sizes without losing their aspect ratio.

Adjust the classnames as needed and consider modifying image heights if necessary for alignment. Don't hesitate to experiment with different settings to achieve the desired layout.

Trust this guidance aids in resolving your query!

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

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

Can you assist with the following issue? <?php if(isset($_POST['MEASURE'])) { shell_exec("sudo python /var/www/html/lab/mkdir.py"); } ?> Here is the HTML part: <form method="post" > <input type="submi ...

phppythonhtmlbutton

Unusual margin glitch discovered in Chrome version 9

Encountered a strange issue with Google Chrome 9: A left-margin for an input element is specified but Chrome fails to apply it upon page load. Oddly enough, when I toggle the specific declaration off and then back on using Developer Tools, the margin is f ...

htmlcssgoogle-chromemarginmargins

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

Altering the color of text in hyperlinks within a list

Recently, I've started exploring CSS styling and I'm curious if there is a more effective way to change the color of link text when they are within a list. Currently, all my links have the same color and I'd like to enhance this aspect. < ...

htmlcsscolorshyperlinkstyling

Creating a protective boundary for images and text in HTML

<!DOCTYPE html> <html> <head> <title>Homepage</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <body style="background-color:#38a9e3;"> <link rel="styl ...

htmlcss

Embed the image within the form input

I am trying to incorporate an SVG image into a bootstrap form input, similar to this example: https://i.sstatic.net/7ZSRH.png This is the HTML code: <div class="col-md-6"> <div class="subscribe-wrapper subscribe2-wrapper mb-15&q ...

htmlcsstwitter-bootstrapsassbootstrap-4

Having trouble getting the HTML5 Video to play using the AngularJS ng-src tag?

There seems to be an issue with AngularJS ng-src not working properly with the HTML5 Video element in this specific fiddle: http://jsfiddle.net/FsHah/5/ Upon inspecting the video element, it appears that the src tag is correctly filled with the appropriat ...

ajaxhtmlangularjshtml5-video

Tips for aligning a SPAN in a navbar to the center

When attempting to center the middle span, the right span containing buttons shifts downward. I am trying to create a navigation bar with one link on the left, three links in the center, and two buttons on the right. While floating the elements on the left ...

htmlcss

Implement a scrolling feature to the tooltip when using "data-toggle"

I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the to ...

htmlcssasp.net-mvcbootstrap-4tooltip

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

Display as selected when the option is chosen

Two APIs are available to retrieve permissions data: one returns a list of all permissions, while the other returns a list of selected permissions. The goal is to display a list of permissions in checkboxes, with a checkmark next to any permissions that ha ...

htmlangular

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

javascripthtmlcss

Adjust the width of a textarea dynamically as you type by detecting keyup events

Two text areas have the same text formatting. Their IDs are textareaA and textareaB. I've successfully added functionality to resize textareaA on keyup. How can I make textareaB resize its WIDTH while the user is typing in textareaA? Here's wha ...

javascriptjqueryhtmlcss

The clear function in the template slot of Vue multiselect is not functioning properly

I decided to incorporate the asynchronous select feature found in the documentation for my project. This feature allows me to easily remove a selected value by clicking on 'X'. Below is a snippet of the general component that I use across variou ...

javascriptcssvue.jsvue-multiselect

iPhone footer hides table content

Encountering issues on an iPhone while attempting to display a "timeline" consisting of a table content. The problem arises when 30 rows are present, but only 28 are visible on the screen. The remaining two rows are hidden behind the footer, requiring scro ...

htmlcssbootstrap-4

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

csstwitter-bootstrap

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

I've been noticing a problem today while examining the source code on a website. I typically use PHP output in my templates to generate dynamic content. Initially, the templates are written in HTML only, with clean indentation and formatting. The PHP ...

phphtmlbrowser

"Obtaining Google locations within a modal box - a step-by-step

Having trouble with my Google Places search integration in Angular 2. <input type="text" type="text" class="form-control" placeholder="Address" [ngClass]="{active:signupSubmitted && !signUpForm.controls['formatted_address'].valid}" [ ...

htmlcssangularangular2-templatebootstrap-4

`Arrange Buttons Horizontally in Bootstrap`

I've been struggling to align my two bootstrap buttons next to each other horizontally, instead of on top of one another vertically. Despite researching and trying various suggestions, I still can't seem to get it to work... Below is the code I ...

htmlcsstwitter-bootstrapalignment