I'm experiencing some difficulty with positioning a second navigation bar in my Adobe XD design. View the Adobe XD design here
My attempts to use the float element have resulted in an overlap with the background image for the hero section.
Here is how it currently appears: View current layout
If anyone could provide direction on how to resolve this issue, I would greatly appreciate it. Additionally, I've noticed that the navigation bars are not responsive :(
I made changes to your CSS by removing the float declarations and implementing display: flex; instead. This adjustment will prevent any issues with your navbars overlapping the hero-image going forward. To ensure that the logo aligns properly with the second navbar, it should be placed within the same div.
You might want to consider renaming your elements as having both a main-navigation and a main-navbar can cause confusion. It's important to clarify which one serves as the main navigation component.
If you uncomment the background properties, you can visualize the spacing occupied by each element.
... (further details/content can be added here)https://i.sstatic.net/kR0G2.jpg
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;1,500&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font-size: smaller;
}
.logo {
width: 12em;
margin: 2em;
left: 20px;
}
.top-navbar {
font-size: smaller;
width: 100%;
}
nav li {
display: inline-block;
margin: 1em;
}
.hero-image {
background-image: url("https://www.midlandnetworks.co.uk/wp-content/uploads/2018/08/midland-info-graphic-starter1-01-1900x500.png");
display: block;
height: 50vh;
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 1px;
}
.introduction-section {
margin: 2em;
}
h1 {
font-size: 28px;
&::after {
content: ' ';
border-bottom: 5px solid #3274B9;
display: block;
width: 1.3em;
}
}
h2 {
font-size: 18px;
font-weight: 300;
}
p {
font-weight: 200;
}
.main-navbar {
font-size: 1em;
width: 100%;
margin-top: 28px;
}
.div-container {
width: 100%;
height: 150px;
}
.logodiv {
float: left;
width: 19%;
height: 200px;
}
.main-navigation {
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midland Networks | Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
<div class="div-container">
<div class="logodiv" style=" ">
<img src="https://dynamic.brandcrowd.com/asset/logo/4bcc41b8-a669-4722-bf04-57fe2cd8dc7f/logo?v=4" class="logo" alt="logo">
</div>
<div class="main-navigation">
<nav class="top-navbar">
<ul>
<li>0121 xxx xxx</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Help Centre</li>
<li>Downloads</li>
<li>PBX Login</li>
<li>Billing</li>
</ul>
</nav>
<div class="main-navbar">
<nav class="main">
<ul>
<li>0121 xxx xxx</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Help Centre</li>
<li>Downloads</li>
<li>PBX Login</li>
<li>Billing</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="hero-image">
</div>
<div class="introduction-section">
<h1>Welcome to Midland Networks</h1>
<h2>Business Telecom Specialists with over 30 years experience </h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
</div>
<div class="highlighted">
</div>
<div class="our-services">
</div>
<div class="contact-us">
</div>
</body>
<footer>
</footer>
</html>I am trying to create a list using ul li elements. When the content inside the li exceeds the width, a scrollbar appears. However, I am encountering an issue where the li tag does not cover the entire width and spills outside. .container{ b ...
I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...
My table includes a td element that serves as a toggle switch, transitioning between 3 states flawlessly in Chrome. However, I am facing issues with its functionality in Safari and seek assistance in rectifying the issue to ensure cross-browser compatibili ...
Incorporating jquery EasyUI, I have created a table where I want the first column to remain static while the rest of the columns scroll when the screen size is reduced. Code snippet available here. Is there a way to freeze just the Title1 column? I attem ...
After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...
It's clear that the <input type="slider"> element is not part of the spec, but I'm interested in using it as a placeholder or identifier for a plugin I'm working on. This plugin will actually swap out the <input> with a series o ...
I've been attempting to implement the bounceInUp animation from animate.css on a div upon showing it, but I can't seem to get it to work. What am I doing wrong? Can someone guide me on the correct way to achieve this effect? This is my CSS code ...
I am currently working on integrating an XML file into my HTML and displaying it in a table. A snippet of the XML is provided below: <?xml version="1.0" encoding="UTF-8"?> <product category="DSLR" sub-category="Camera Bundles"> <id>0 ...
Is it possible to scroll the entire browser window to the top when clicking on a link inside the iframe I'm in? I have control over both the page container and the iframe. ...
I found this awesome CSS menu on Fiddle that I'd like to share with you: http://jsfiddle.net/DenErello/pQhpu/ Here's the CSS code: .Menu { background-color: #3b69a2; height: 30px; } .Menu, .Menu li { list-style: none; padding: 0; margin: 0; } . ...
I am currently seeking assistance with resolving an issue I have encountered on a Shopify theme that I recently customized. The problem lies within the quantity box on the live site where despite being able to adjust the quantity using the buttons, the act ...
I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...
I recently copied the bootstrap 5 Carousel code and tweaked it with some additions, however, it's not functioning correctly. It seems to only go to the 2nd slide and then stops. Strangely enough, when I open the developer tools (F12) and go to inspect ...
Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...
I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...
I am currently facing an issue with playing sound on mobile browsers. In my code snippet, I have the following: Response.Write("<embed height='0' width='0' src='Ses.wav' />"); While this works perfectly fine on desktop ...
I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...
Having some trouble with my Next.js project as I'm using getStaticProps and getStaticPath to build a page, but unfortunately, the HTML is not being generated in the page source. This issue is causing problems with SEO, and I haven't implemented r ...
My current task involves dealing with multiple folders containing images. When a link is clicked on the previous page, a unique $_GET variable is sent and processed by an if statement, triggering a function to search for and display all pictures within the ...
After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...