0

I have a table of buttons functioning as my navigation bar, and it's centered to my page.

I want to put my logo either directly on the left of the table, or float all the way to the left of the page. However, the logo's presence affects my navigation bar to where my navigation bar is no longer centered.

Is there any way I can have multiple alignments in one line? Have my logo left-aligned, and my navigation bar centered to the page?

I'm fairly new at code so I'd appreciate any other tips and suggestions as well.

html {
	background-color: #305a5c;
	text-align: center;
	font-family: "Kelly Slab", Monospace;
	font-size: 24px;
}

/* top */
header {
	overflow: hidden;
	background-color: #0D282A;
	padding: 0px;
	margin: -8px;
}

.nav {
	position: relative;
	margin: auto;
}

.logo {
    height: 150px;
}

.nav a {
	text-decoration: none;
	color: #FFFFFF;
	filter: grayscale(.8);
}

.nav a:hover {
	filter: grayscale(0);
	text-shadow: 1px 1px rgb(69, 69, 69);
}
	
/* nav bar buttons */
.nav-about {
	background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-b-f {
    background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-commission {
    background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-gallery {
    background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-characters {
    background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-queue {
    background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}

.nav-tos {
    background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
	background-position: center;
	display:block;
	padding: 20px 0px 20px 0px;
	background-repeat: no-repeat;
}

.nav-contact {
	background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
	background-position: center;
	display:block;
	padding: 20px;
	background-repeat: no-repeat;
}
<!doctype html>

<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap" rel="stylesheet">
<html lang="en">
<title>KLUDGE'S ART</title>

<!-- nav bar -->
<header>
<a href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>

<nav>
		<table class="nav" align="center">
		<col width="200px">
		<col width="200px">
		<col width="200px">
		<col width="200px">
	<tr>
	<td><a class="nav-about" href="http://kludges.art">About</a></td>
	<td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
	<td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
	<td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
	</tr>
	<tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
	<td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
	<td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
	<td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
		</tr></table>
		</nav>
	
</header>

3

3 Answers 3

1

You can apply position: absolute; and left: 0; to the .logo, which will take it out of any position calculations for its siblings and position it far left, and margin: 0 auto to the navbar, which will center it. But in this case you will also have to find another solution (in a media query) for smaller screens, where the logo won't fit next to the centered navbar, but instead overlap it/ be covered by it.

(You'll have to open the snippet below in full screen mode to see the proper result)

<!doctype html>
<style>
html {
    background-color: #305a5c;
    text-align: center;
    font-family: "Kelly Slab", Monospace;
    font-size: 24px;
}

/* top */
header {
    overflow: hidden;
    background-color: #0D282A;
    padding: 0px;
    margin: -8px;
}

.nav {
    position: relative;
    margin: 0 auto;
}

.logo {
    height: 150px;
    position: absolute;
    left: 0;
}

.nav a {
    text-decoration: none;
    color: #FFFFFF;
    filter: grayscale(.8);
}

.nav a:hover {
    filter: grayscale(0);
    text-shadow: 1px 1px rgb(69, 69, 69);
}

/* nav bar buttons */
.nav-about {
    background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-b-f {
    background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-commission {
    background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-gallery {
    background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-characters {
    background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-queue {
    background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-tos {
    background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
    background-position: center;
    display:block;
    padding: 20px 0px 20px 0px;
    background-repeat: no-repeat;
}

.nav-contact {
    background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

</style>

<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap" rel="stylesheet">
<html lang="en">
<title>KLUDGE'S ART</title>

<!-- nav bar -->
<header>
<a href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>

<nav>
        <table class="nav">
        <col width="200px">
        <col width="200px">
        <col width="200px">
        <col width="200px">
    <tr>
    <td><a class="nav-about" href="http://kludges.art">About</a></td>
    <td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
    <td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
    <td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
    </tr>
    <tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
    <td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
    <td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
    <td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
        </tr></table>
        </nav>

</header>```

1
  • Oops, I must have overlooked your answer. I will look towards learning about media query for that overlap. Thanks so much for all the help!
    – Kludge
    Dec 24, 2019 at 2:07
0

If I understand correctly you wanted to set logo in left but table will be center of the page. Here is the Demo or Example.

You have to set you logo position: absolute and header will be position: relative.

HTML

<header>
<a class="header-logo" href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>

<nav>
        <table class="nav" align="center">
        <col width="200px">
        <col width="200px">
        <col width="200px">
        <col width="200px">
    <tr>
    <td><a class="nav-about" href="http://kludges.art">About</a></td>
    <td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
    <td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
    <td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
    </tr>
    <tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
    <td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
    <td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
    <td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
        </tr></table>
        </nav>

</header>

CSS

html {
    background-color: #305a5c;
    text-align: center;
    font-family: "Kelly Slab", Monospace;
    font-size: 24px;
}
body{
  margin: 0;
  padding: 0;
}
/* top */
header {
    overflow: hidden;
    background-color: #0D282A;
    padding: 0px;
    position: relative;
    /*margin: -8px;*/
}
.header-logo{
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}
.nav {
    position: relative;
    margin: auto;
}

.logo {
    height: 150px;
}

.nav a {
    text-decoration: none;
    color: #FFFFFF;
    filter: grayscale(.8);
}

.nav a:hover {
    filter: grayscale(0);
    text-shadow: 1px 1px rgb(69, 69, 69);
}

/* nav bar buttons */
.nav-about {
    background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-b-f {
    background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-commission {
    background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-gallery {
    background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-characters {
    background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-queue {
    background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

.nav-tos {
    background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
    background-position: center;
    display:block;
    padding: 20px 0px 20px 0px;
    background-repeat: no-repeat;
}

.nav-contact {
    background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
    background-position: center;
    display:block;
    padding: 20px;
    background-repeat: no-repeat;
}

For smaller screen.

@media (max-width: 1023px){
  header{
    display: flex;
    flex-wrap: wrap;
  }
  .header-logo{
    position: static;
  }
  nav{
    overflow-x: auto;
  }
  table.nav{
    margin-bottom: 20px;
  }
}

Hope this help.

2
  • Oh, wow, this looks fantastic, thank you! Now, is there a way I can make the logo move up to the top, in case the browser window is small? The logo currently stays at the corner on top of the navigation bar when I make the window smaller.
    – Kludge
    Dec 24, 2019 at 2:04
  • @Kludge Check Ans again. I add how you write CSS for smaller devices.
    – Rahul
    Dec 24, 2019 at 2:23
0

You can try to use float property:

https://www.w3schools.com/css/css_float.asp

2
  • I've tried to float the logo to the left, but it still shifts my navigation bar over to where it is off-center to the page. 66.media.tumblr.com/905c9b2ce7a51e6efce26ebb530683f3/…
    – Kludge
    Dec 24, 2019 at 1:47
  • well, you can make the whole bar a flex-container, set justify-content: center to it and set margin-right: auto to the child you wanna have at the left. Dec 24, 2019 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.