-1

I have a nav bar which i cannot centre horizontally. I have a nav tag with a ul tag inside and li tags inside that then some of the li tags have ul's and li's to create dropdown lists. I cannot get the nav to be centered in the page??

/* Main Header Menu */

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  display: inline-block;
  text-align: center;
}

.headermenu>ul {
  padding-left: 0;
}

.headermenu>ul>li {
  float: left;
  position: relative;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <title>Complete Suites</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
  <div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>
</body>

</html>

Please point out anything that might help with my problem, and an explanation would be awesome to as i am trying to learn the reason why as well as just moving/centering the element.

thanks James

edit:

Changed code to only display the issue i am asking about.

James Crabb
  • 25
  • 7

3 Answers3

1

Remove float: left;

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}

Since you are already using display: inline-block, it is not needed and leads to your problem. For a detailed explantion on both display: inline-block and float and the difference between them, see this answer for reference: Advantages of using display:inline-block vs float:left in CSS

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  display: inline-block;
  text-align: center;
}

.headermenu>ul {
  padding-left: 0;
}

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}
<div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>
Rence
  • 2,900
  • 2
  • 23
  • 40
  • thanks! this works with just the 4 list links. but if i add dropdowns to "bath" and more links like "basins" and "toilets" so the main nav bar looks like this "Home On Sale Suites Baths Basins Toilets" it lists the the other main nav links on a new line? – James Crabb Jul 11 '18 at 11:11
  • Can you make an example of what you mean? Just add the ones you are talking about to this: https://jsfiddle.net/574wyvje/ – Rence Jul 11 '18 at 11:19
  • I also made an own example with a dropdown, in case this is what you meant: https://jsfiddle.net/574wyvje/6/ – Rence Jul 11 '18 at 11:33
  • I have added some of the dropdown elements i was discussing, the some of the dropdowns will have 3 vertical lists of links. – James Crabb Jul 11 '18 at 19:58
  • Is your html fixed? Because right now you have multiple seperate uls that are not grouped together - this won't be repsonsive at all. You need to wrap them together so they are one dropdown. – Rence Jul 12 '18 at 06:43
  • Here it is with a div wrapper, could be another ul or li or whatever you want though as well: https://jsfiddle.net/574wyvje/35/ – Rence Jul 12 '18 at 06:50
  • wow, ok thank you so much, i didn't realise that it needed to be inside another wrapper to ensure it is responsive, i assumed because it was inside the div head-menu-wrap and the nav it would be responsive?. Sorry to be a pain but can i ask what would be the benefit or difference if i put the drop down inside a a ul or li? – James Crabb Jul 12 '18 at 13:05
  • I would say a simple div has the most benefits design wise, you will not have to adjust much styles (as opposed to an ul, which has some default styles like padding). The benefit of an ul or a li might be for a screenreader, since those can interpret lists and tell their user "this is a sublist for the first list, and it contains 3 other lists" - however, in your case, I do not see a reason for this, as currently the semantics in your case would be "this is the first list, it has 3 other lists", skipping the sublist part which is not relevant in your usecase. – Rence Jul 12 '18 at 15:27
  • Ok i understand, i think. Thank you again you have been very helpful. – James Crabb Jul 13 '18 at 12:41
0

Your nav is already centered. But if you want to center your middle ul element you should set every ul's width to 33% and set middle ul text align to center.

Keivan Sina
  • 608
  • 5
  • 21
0

Try this 

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  padding: 0 10px;
}

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <title>Complete Suites</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
  <div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>
</body>
Suraj Libi
  • 515
  • 2
  • 9