I’m struggling to align a test image and a navigation toggle bar within my navigation menu. I’ve tried changing various properties of my HTML and CSS to try and align these two elements along with the other links that I have. The test image floats up and to the left of my links but I want it to be in a straight line with the links. The navigation toggle bar when in mobile view floats to the right like I want it to but it doesn’t space itself from the edges of the navigation menu.

The issue with the navigation toggle bar I think is due in part to my margins but I’m not entirely sure because when I changed properties of the test image it changes the behavior of the navigation toggle bar causing weird behavior. I tried changing the position and margins of the test image but can’t get it lined up properly. I’m not sure what I’m doing wrong or if I’m missing code to facilitate these changes.

Screenshots:

r/webdev - Aligning elements in navigation bar

In this image you can see how the current logo rests and is not in line with the links how I would like.

r/webdev - Aligning elements in navigation bar

This is the navigation toggle bar that isn’t properly centered in the navigation bar when the website switches to mobile view. In desktop mode the navigation toggle bar should disappear, which it does.

Here are all files I feel are relevant to this issue which can also be found on my github , some code was removed to make the files smaller for this post.

index.html

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Webpage for Projects">
		<meta name="author" content="Joseph Fitzgerald">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" href="CSS/index.css">
		<link rel="stylesheet" href="CSS/title.css">
		<link rel="stylesheet" href="CSS/footer.css">
		<link rel="stylesheet" href="CSS/navigation.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>

	<body>
		<div class="top-container">
                /*Code removed*/
		</div>

		<nav class="fill-navbar" id="mynavBar">
			<img src="../Photos/test_logo2.png" alt="Logo" width="40px" height="40px">
			<span class="navbar-toggle" id="js-navbar-toggle">
				<i class="fa fa-bars"></i>
			</span>
			<ul class="main-nav" id="js-menu">
				<li><a class="active" href="index.html">Home</a></li>
      			<li><a href="About.html">About</a></li>
      			<li><a href="Projects.html">Projects</a></li>
			    <li><a href="Resume.html">Resume</a></li>
			    <li><a href="Contact.html">Contact</a></li>
 			</ul>
  		</nav>

		<div class="content">
			<p>Content</p>
			<article class="testArticle">
                            /*Code removed*/
			</article>
		</div>

		<footer class="flex-footer">
                    /*Code removed*/
		</footer>

		<script type="text/javascript" src="JAVASCRIPT/stickyNavScript.js"></script>
		<script type="text/javascript" src="JAVASCRIPT/navbartoggle.js"></script>

	</body>
</html>

index.css

html, body {
	height: 100%;
}

body {
	margin: 0;
  	font: 16px Sans-Serif;
	display: flex;
	flex-direction: column;
}

.top-container {
	background: #24305E;
	background: url("../Photos/5.jpg") no-repeat center;
	text-align: center;
	min-height: 100%;
}

.top-container > p {
	color: white;
}

.sticky{
	position: fixed;
	top: 0;
	/*width: 100%;*/
	left: 0;
	right: 0;
}

.sticky + .content {
	/*padding-top: 100px;*/
	padding-top: 60px;
}

.content {
	flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
	padding: 20px;
	background-color: black;
}

.testArticle {
	color: white;
	background-color: black;
	padding: 4px;
	box-shadow: 0px 0px 8px 8px #13c6e4;
    -webkit-columns: 2 200px;
       -moz-columns: 2 200px;
            columns: 2 200px;
    -webkit-column-gap: 4em;
       -moz-column-gap: 4em;
            column-gap: 4em;
    -webkit-column-rule: 1px dotted #ddd;
       -moz-column-rule: 1px dotted #ddd;
            column-rule: 1px dotted #ddd;
}

navigation.css

/* NAVIGATION */
nav {
	width: 100%;
	/*Add a fixed height that is changed when the window is resized*/
	margin: 0 auto;
	/*Navigation color*/
	background: #040404; 
	padding: 2px 0; 
	border-bottom: 2px solid #ce1c69;
	position: relative;
}

nav ul {
	list-style: none;
	text-align: left;
}

nav ul li {
	display: inline-block; /*Changes how the buttons are stacked*/
}

nav ul li a {
	display: block; 
	padding: 4px; /*This is the padding around all these elements*/
	text-decoration: none;
	color: white; /*Changes button text color*/
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 10px;
}

nav ul li a, nav ul li a:after, nav ul li a:before {
	transition: all .5s;
}

nav ul li a:hover {
	color: #555; /*This changes the color of the text when you hover over a button*/
}

nav ul li a.active{
	background: #ce1c69;
	border-radius: 20px;
}

/* stroke */
nav.stroke ul li a, nav.fill-navbar ul li a {
	position: relative;
}

nav.stroke ul li a:after, nav.fill-navbar ul li a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 0%;
	content: '.'; 
	color: transparent;  
	background: #13c6e4; /*The little line that goes under the text first is this color before the button fills up*/
	height: 1px;
}

nav.stroke ul li a:hover:after {
	width: 100%;
}

nav.fill-navbar ul li a {
	transition: all 2s;
}

nav.fill-navbar ul li a:after {
	text-align: left;
	content: '.';
	margin: 0;
	opacity: 0;
}

nav.fill-navbar ul li a:hover {
	color: black; /*changes button text color on hover and fill*/
	z-index: 1;
}

nav.fill-navbar ul li a:hover:after {
	z-index: -10; /*Sets the fill animation to the background not the foreground*/
	animation: fill 1s forwards;
	-webkit-animation: fill 1s forwards;
	-moz-animation: fill 1s forwards;
	opacity: 1;
}

/* Keyframes */
@-webkit-keyframes fill {
	0% {
		width: 0%;
		height: 1px; /*THIS CHANGES THE HEIGHT OF THE STROKE AT THE BEGINNING OF THE ANIMATION */
	}
	50% {
		width: 100%;
		height: 1px; /*THIS CHANGES THE HEIGHT OF THE STROKE MID WAY THROUGH*/
	}
	100% {
		width: 100%;
		height: 100%;
		background: #13c6e4; /*Changes fill color*/
		border-radius: 20px;
	}
}

.logo{
	display: inline-block;
	background-color: white;
}

/*Hide the toggle bar while the screen is larger than 800px*/
.toggle-navbar{
	display: none;
}


@media only screen and (max-width: 800px) {
	.fill-navbar {
	    font-size: 18px;
	    background-color: #040404; 
	    padding-bottom: 10px;
	}

	.main-nav {
	    list-style-type: none;
	    display: none;
	}

	.main-nav li {
	    text-align: center;
	    margin: 10px auto;
	}

	.logo {
	    display: inline-block;
	    font-size: 22px;
	    margin-top: 10px;
	    margin-left: 20px;
	    background-color: white;
	}

	.navbar-toggle {
	    position: absolute;
	    top: 10px;
	    right: 20px;
	    cursor: pointer;
	    color: rgba(255, 255, 255, 0.8);
	    font-size: 24px;
	}

	/*This displays menu on mobile as a column*/
	ul#js-menu.main-nav.active{
		display: flex;
		flex-direction: column;
	}
}

stickNavScript.js

const nav = document.querySelector('#mynavBar')
const firstScreen = document.querySelector('.top-container')
document.addEventListener('scroll', function(e) {
  let scrollCount = self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);

  if (scrollCount > firstScreen.clientHeight) {
    nav.classList.add('sticky')
  } else {
    nav.classList.remove('sticky')    
  }
}) 

navbartoggle.js

let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');

navBarToggle.addEventListener('click', function () {
  mainNav.classList.toggle('active');
});

To see a live demo of all this you can visit the website and inspect element to change the view from desktop to mobile to see the navigation bar change. Note I haven’t added the test logo image to the other pages so you wont see it there. Any help or tips on this issue would be greatly appreciated!

Also if more information is needed please message me, thank you!



Source link

Write A Comment