-1

I'm creating a menu using Bulma CSS. I have the following logo:

enter image description here

And I would like to use it much like the Atlantic did, in the center of the page. However, I'm not sure how; I've tried margin-auto:0, but that didn't work out. I also tried messing with the margins, and flexbox and inline-block, but to no avail. Any help is appreciated.

enter image description here

Here is the page thus far (on Codepen): https://codepen.io/Refath/full/ZEQzOQX

Additional Information: The Navbar is currently using one of Bulma's Components, as follows in the snippet below: 

     <nav class="navbar" role="navigation" aria-label="main navigation">
<form id="demo-2">
    <input type="search" placeholder="Search">
</form>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Math
      </a>

      <a class="navbar-item">
        Science
      </a>
      <a class="navbar-item">
        Politics
      </a>

      <a class="navbar-item">
        Economics
      </a>

      <a class="navbar-item">
        Education
      </a>

      <a class="navbar-item">
        Literature
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
DarkRunner
  • 449
  • 4
  • 15

1 Answers1

0

Use margin: 0 auto; or margin: auto;

It will work like this,

margin: auto; will be margin automatic from all four sides, and in case of

margin: 0 auto;. it will be 0 from top and bottom and auto from left and right.

Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
  • Hi, I've just tried it but it messed up my formatting. Would you mind showing me the working example? – DarkRunner Jun 01 '20 at 10:35
  • ok, I am giving you working example, just a small question, as your menu items are too much and you want your logo exactly center, so is it ok for you to move some of your menu items to more list? – Atul Rajput Jun 01 '20 at 10:53
  • OK, I moved some of them to the more list – DarkRunner Jun 01 '20 at 10:57
  • Can you please check now? – DarkRunner Jun 01 '20 at 10:58
  • I have created 2 versions for you, in both version I have changed the HTML structure, if you find any problem related to that, feel free to ask https://codepen.io/atulraj89/pen/WNreoem in this, I have used transform and logo is exactly center. and in this one https://codepen.io/atulraj89/pen/BajBQaq , its not center, it will depend on the items in your menu – Atul Rajput Jun 01 '20 at 11:06
  • Thank you; I will take a look and adjust them as neccesary. – DarkRunner Jun 01 '20 at 11:08
  • if this will help you then, dont forget to up-vote and I am changing the answer accordingly, so Mark it as right answer, only if it helps – Atul Rajput Jun 01 '20 at 11:14
  • and one more thing, I am not aware of your requirements, but as per my knowledge its not ideal to use bulma with Bootstrap. they are alternatives to each other. – Atul Rajput Jun 01 '20 at 11:17