News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Needing some help Centering a navmenu

Started by Jeremy M., June 18, 2019, 05:53:30 PM

Previous topic - Next topic

Jeremy M.

I basically am trying to get the texts and menu to center and if I need to add another menu item to have it automatically center as well. I can probably adjust the width later if needed.


HTML CODE

<div class="navbar">
<a href="#home">Home</a>
<a href="#home">Radar</a>
<a href="#home">Current Weather</a>
<a href="#home">Live Radar</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Blog
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Pictures</a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">About Us
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Contact Me</a>
      <a href="#">Facebook</a>
      <a href="#">Link 3</a>
    </div>


CSS CODE

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #000;


}

.navbar a {
  float: left;
  font-size: 16px;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 



}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: yellow;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Dzonny

Hey there.

It might be easier if you can also leave a URL to your forum so we can take a look at it, and then suggest changes according to that. :)

Jeremy M.


Jeremy M.

Quote from: Dzonny on June 18, 2019, 06:06:37 PM
Hey there.

It might be easier if you can also leave a URL to your forum so we can take a look at it, and then suggest changes according to that. :)

My website isn't live just yet.

Sir Osis of Liver



<div class="wrapper">
<div class="navbar">
<a href="#home">Home</a>
<a href="#home">Radar</a>
<a href="#home">Current Weather</a>
<a href="#home">Live Radar</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Blog
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Pictures</a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">About Us
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Contact Me</a>
      <a href="#">Facebook</a>
      <a href="#">Link 3</a>
    </div>
   </div>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #000;
  display: inline-block;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: yellow;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>


Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Jeremy M.

Quote from: Sir Osis of Liver on June 18, 2019, 06:22:31 PM


<div class="wrapper">
<div class="navbar">
<a href="#home">Home</a>
<a href="#home">Radar</a>
<a href="#home">Current Weather</a>
<a href="#home">Live Radar</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Blog
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Pictures</a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">About Us
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Contact Me</a>
      <a href="#">Facebook</a>
      <a href="#">Link 3</a>
    </div>
   </div>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #000;
  display: inline-block;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: yellow;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>



that works. . BUT, one small problem. . It centers everything in the wrapper. I only need the menu centered. What about the paragraphs? Can I get those to align left by using <left> or something similar?

Jeremy M.

I just noticed, I did put this in the wrong section. . My bad. . If someone could move it to the "Scripting Help" board, that'd be sweet.

Illori

maybe http://custom.simplemachines.org/mods/index.php?mod=2553 would help center the menu assuming your theme is based off the curve theme.

Jeremy M.

Quote from: Illori on June 18, 2019, 07:51:59 PM
maybe http://custom.simplemachines.org/mods/index.php?mod=2553 would help center the menu assuming your theme is based off the curve theme.

I'm not using an SMF Theme or anything like that. I don't have a forum.  That's why I had mods move this thread from 2.0 Support.  I'm creating a weather website. I'm a storm chaser, and I'm going to sell customize shapefile maps and placefiles for weather radar software.

Sir Osis of Liver

When I run your code I just see the menu, nothing else should be in the wrapper.  You're supposed to be able to center a div using margin: auto, but it's never worked for me.  You have to wrap the menu div in another div that's 100% wide, use display: inline-block to size the menu div to the menu (or it will be 100% wide also), and center it with text-align within the wrapper.  Anything else should be outside the wrapper. The dropmenus work correctly, they drop below the wrapper.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Diego Andrés

Would be much easier if you used lists to build the menu

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: