The logo fails to appear in the middle of the navigation bar

I've been struggling to center my logo within the navigation bar. Despite numerous attempts, I can't seem to get it right.

HTML 

  <div class ="menu-bar">

    <ul id='menu'> 

 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

CSS

body {
    font: 18px "Avenir Light", 'Open Sans', sans-serif; 
    color: #989898;
    background-color: #F3F4F4;
    font-weight: 100;
    width: 100%;
    overflow-x: hidden;

}

.container {
margin-right:auto;
margin-left:auto;
padding-left:15px;
padding-right:15px

}

p{ 

font:18px "Avenir Light";
color: #989898;



} 



section {
    padding: 100px 0;
}


section.success {
    color: #fff;
    background: #8D4198;
    margin-right: -15px;
    margin-left: -15px;
}

section.white{
    color: #989898;
    background: #F3F4F4;
    margin-right: -15px;
    margin-left: -15px;

}

section.orange{

    color: #fff;
    background: #EF5336;
    margin-right: -15px;
    margin-left: -15px;

}

/* Headings */ /* Headings */ /* Headings */
/* Headings */ /* Headings */ /* Headings */

h5 {
    font-size: 32px;
    color: #8D4198;
    font-weight: lighter;
    text-align:center;


}

h4 {
    font-size: 32px;
    color: #989898;
    font-weight: lighter;
    text-align:center;
    /*border-bottom: solid 1.5px #EE5435; */
    margin-top: -20px;

}



/* Header */ /* Header */ /* Header */ /* Header */
/* Header */ /* Header */ /* Header */ /* Header */


.header {
    background-color:#F3F4F4;
    height:150px;
    margin: -10px;


}

.header .menu-bar{
    padding-top: 80px;


}


.header .menu-bar ul {
    margin:0 auto;
    width: 950px;;
    list-style: none;

}

.header .menu-bar li {
  float: left;
  border:medium #0F0;
  padding-left: 32px;

}


.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat:no-repeat;
    width: 60px;    
    height: 90px;
    margin: 0 auto;
    margin-top:-33px;
    padding-bottom: 10px;
    border-bottom: none;
}

.header .menu-bar a:hover  {
 color: #8D4198;
}

.header .menu-bar aorange:hover  {
 color: #8D4198;
}

.header .menu-bar ayellow:hover  {
 color: #8D4198;
}


#here,
#us {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #93D7E7;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;

}


#shop,
#contact {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #EE5435;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;

}


#checkout,
#press {
    padding:0 32px;
  text-align:center;
  display:block; 
  color: #D3DC3F;
  margin: 0 auto;
  font-size:17px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}

Feel free to take a look at my codepen link for reference: http://codepen.io/anon/pen/KpwPoO

I'm reaching out for new perspectives! Any assistance or advice would be greatly appreciated. Thank you!

css

Answer №1

In order to change the layout context for <a> (which is inline by default), you need to:

body {
  font: 18px "Avenir Light", 'Open Sans', sans-serif;
  color: #989898;
  background-color: #F3F4F4;
  font-weight: 100;
  width: 100%;
  overflow-x: hidden;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}

p {
  font: 18px "Avenir Light";
  color: #989898;
}

section {
  padding: 100px 0;
}

section.success {
  color: #fff;
  background: #8D4198;
  margin-right: -15px;
  margin-left: -15px;
}

section.white {
  color: #989898;
  background: #F3F4F4;
  margin-right: -15px;
  margin-left: -15px;
}

section.orange {
  color: #fff;
  background: #EF5336;
  margin-right: -15px;
  margin-left: -15px;
}
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */
/* Headings */

h5 {
  font-size: 32px;
  color: #8D4198;
  font-weight: lighter;
  text-align: center;
}

h4 {
  font-size: 32px;
  color: #989898;
  font-weight: lighter;
  text-align: center;
  /*border-bottom: solid 1.5px #EE5435; */
  
  margin-top: -20px;
}
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */
/* Header */

.header {
  background-color: #F3F4F4;
  height: 150px;
  margin: -10px;
}

.header .menu-bar {
  padding-top: 80px;
}

.header .menu-bar ul {
  margin: 0 auto;
  width: 950px;
  ;
  list-style: none;
}

.header .menu-bar li {
  float: left;
  border: medium #0F0;
  padding-left: 32px;
}

.header ul li a.logo {
  background: url("http://i.imgur.com/B5AV1zb.png");
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  margin-top: -33px;
  padding-bottom: 10px;
  border-bottom: none;
  display: block
}

.header .menu-bar a:hover {
  color: #8D4198;
}

.header .menu-bar aorange:hover {
  color: #8D4198;
}

.header .menu-bar ayellow:hover {
  color: #8D4198;
}

#here,
#us {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #93D7E7;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #93D7E7;
  padding-right: 50px;
  padding-left: 0px;
}

#shop,
#contact {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #EE5435;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #EE5435;
  padding-right: 50px;
  padding-left: 0px;
}

#checkout,
#press {
  padding: 0 32px;
  text-align: center;
  display: block;
  color: #D3DC3F;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  text-decoration: none;
  border-bottom: solid 1.5px #D3DC3F;
  padding-right: 50px;
  padding-left: 0px;
}
<div class= "header">

  <div class ="menu-bar">
  
    <ul id='menu'> 
     
 <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">HOME</span></a></li>     
<li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">SHOP</span></a></li>
<li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">CHECKOUT</span></a></li>

<li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>

<li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">ABOUT</span></a></li>
<li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">CONTACT</span></a></li>
<li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">PRESS</span></a></li>
</ul>

 </div>
</div>
</div>

display: any value other than inline or float will be effective

Your pen has been forked from http://codepen.io/gc-nomade/pen/jPENQN (same as snippet above)

Answer №2

It seems like your list items are currently set to display: inline, which doesn't allow for any height or width properties. Changing it to display: inline-block will enable it to properly receive the height and width values.

.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat: no-repeat;
    width: 60px;    
    height: 90px;
    margin: 0 auto;
    margin-top: -33px;
    padding-bottom: 10px;
    border-bottom: none;
    display: inline-block;
}

You can view the updated code on Codepen here: http://codepen.io/anon/pen/MwYgPa

Answer №3

Here are a couple of steps you should take.

To start off, your logo is currently within an "a" tag with a background image. However, since an "a" tag is an inline element, the height and width declarations will not affect it.

If you want the height and width properties to apply to your "a.logo", you must change the display to either "block" or "inline-block".

.header ul li a.logo {
    background: url("http://i.imgur.com/B5AV1zb.png");
    background-repeat: no-repeat;
    width: 95px;                 /* Increase width for image */
    height: 90px;
    margin: 0 auto;
    margin-top: -33px;
    padding-bottom: 10px;
    border-bottom: none;
    display: inline-block;       /* Change to inline-block */
}

Additionally, you will need to widen the menu by adding more width to both the logo and the "ul".

Answer №4

It's simple to connect the img within an html <a> tag instead of using it in a css bg

<li><a class="logo" href= '#'><img src="http://i.imgur.com/8fbKcEa.png" alt=""></a></li>

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

Creating personalized columns in a BootstrapVue table

I'm having an issue with the b-table component in bootstrap-vue. The array containing my items is structured like this: [{ id: 1, name: "Test", phone: 555-111-666, address: "Some Address", //etc... }] I have a couple of question ...

javascripthtmlcssvue.jsbootstrap-4

Blend 2 text layers in HTML/CSS

I'm trying to create an effect where two titles overlap each other, with the white title appearing as a border around the black title. However, I'm having trouble figuring out how to achieve this. The light grey box represents the enclosing div. ...

htmlcss

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

CSS: Adjusting the vertical position of text without affecting the background

I am currently working on some CSS buttons that expand in size when hovered over. I have successfully increased the text size as well, but now I am facing an issue with aligning the text a few pixels lower without affecting the background image layout. Ca ...

htmlcssimagebutton

What is the parent selector in cascading style sheets (CSS

Is there a way to use pure CSS to identify the parent selector of a child element? #checkbox{ width: 24px; height: 24px; vertical-align: middle; } #checkbox:checked (parentName){ color: red; } <label for="checkbox"> <input type="check ...

jqueryhtmlcssselector

What is the method for placing text underneath your background image?

click here for image I am trying to set a full viewport background image by applying it to the body tag. Currently, I have successfully achieved this with the following CSS code: body { background-image: url(/picture.jpg); } However, I also want to displ ...

csshtmlbootstrap-4

Adapting text size with Media Queries based on screen dimension

I am currently working on adjusting the size of navigation text depending on the size of the screen using media queries. The text is appearing as 30px on smaller screens, but even on larger screens it remains at 30px. Here is the code snippet: HTML: <d ...

htmlcssmedia-queries

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

javascripthtmlcssreactjsnext.js

Is it possible to change CSS gradients randomly every time the page is refreshed?

Is there a way to randomly cycle CSS gradients each time the page is reloaded? I have defined the following CSS gradients that I want to use: /* Purple */ .fp-hero { background: linear-gradient(20deg, #6e48aa 0%, #9d50bb 73%, #b176cc 100%); } /* Lig ...

jquerycss

What could be causing the unexpected behavior of the flex property?

Check out the code snippet below: @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"); * { box-sizing: border-box; margin: 0; padding: ...

htmlcssflexboxresponsive-design

Conceal an element from view upon clicking on it

Task at Hand : Implement a smooth element hiding effect upon clicking, similar to the behavior on this website , where the letter A fades away smoothly when clicked. Is it possible to achieve this effect using only HTML, CSS, and JavaScript? var t ...

javascripthtmlcssanimationhide

What is the best way to position a Button at the bottom of a div using jQuery?

Within my HTML, I have divided into two col-md-6 sections. On the left side, there is a picture and on the right side, there is text. I am considering using jQuery .height() for this layout. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7 ...

javascriptjqueryhtmlcsstwitter-bootstrap

Eliminate the tiny space between the top of the webpage and the navigation bar

I've made several attempts to eliminate the gap between the navigation and the top by setting margin: 0; and border-box in various places to no avail. Strangely, I couldn't get the navigation bar to stick, so I had to resort to making the header ...

htmlcss

Dynamic background rectangle tilted at a 45-degree angle overlays an image

I have a challenge to create a 45-degree rotated square inside a square container, making sure it is responsive. Here's the code I have come up with so far: <div class="container"> <figure> <img src="https://placekitten.com/500 ...

htmlcssresponsive

Style slipping away when dynamically altering CSS file with JavaScript

My webpage has a style similar to this https://i.sstatic.net/k6TGg.png I am attempting to modify the CSS using JavaScript when a button is clicked. This is my JavaScript code: this.document.getElementById('style-bandle').setAttribute('hre ...

javascripthtmlcssangularjs

The datepicker on mobile devices fails to display the default text of dd/mm/yyyy

This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...

htmlcssbootstrap-5

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

I am facing an issue with a grid of accordions, as demonstrated in the codesandbox linked below. The problem arises when I open one accordion, causing all the accordions in the row below to shift down. Ideally, only the accordion directly below should be p ...

cssflexboxmaterial-uigridaccordion

Simple code in HTML and CSS to assign unique colors to individual characters of the text

What's the best way to assign a unique color to each character in a long text on an HTML page while keeping the file size of the generated HTML as small as possible? The goal is to use minimal color formatting tags. Any suggestions on how to achieve t ...

htmlcsscolors

How come the dropdown menu consistently disrupts my CSS design?

Whenever I add a dropdown menu, my CSS layout gets all messed up. Can someone please explain why this happens and how to fix it? Below is the code snippet: <asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></as ...

c#asp.netcss

What is the best way to incorporate a button for toggling CSS animations?

I need help adding a button to toggle the animation on this JSFiddle. I tried adding the code below but can't seem to start and stop the animation. body .a [class^="b"] { width: 200px; height: 142.8571428571px; margin: 0 auto; ...

javascriptjqueryhtmlcss