Advertisement:

Author Topic: Needing some help Centering a navmenu  (Read 655 times)

Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Needing some help Centering a navmenu
« on: June 18, 2019, 05:53:30 PM »
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

Code: [Select]
<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

Code: [Select]
<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>

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,019
Re: Needing some help Centering a navmenu
« Reply #1 on: June 18, 2019, 06:05:34 PM »
Which theme?

Offline Dzonny

  • Localizer
  • SMF Super Hero
  • *
  • Posts: 11,915
  • Gender: Male
  • No sleep...
    • dzontra.nikola on Facebook
    • Dzonny on GitHub
    • dzontranikola on LinkedIn
    • @opusteniforum on Twitter
    • Samo opusteno
Re: Needing some help Centering a navmenu
« Reply #2 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. :)

Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Re: Needing some help Centering a navmenu
« Reply #3 on: June 18, 2019, 06:08:33 PM »
Which theme?

It's my own theme, actually. . Not really a forum so to speak. .

Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Re: Needing some help Centering a navmenu
« Reply #4 on: June 18, 2019, 06:08:54 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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,019
Re: Needing some help Centering a navmenu
« Reply #5 on: June 18, 2019, 06:22:31 PM »
Code: [Select]

<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>


Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Re: Needing some help Centering a navmenu
« Reply #6 on: June 18, 2019, 07:38:37 PM »
Code: [Select]

<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?

Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Re: Needing some help Centering a navmenu
« Reply #7 on: June 18, 2019, 07:47:51 PM »
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.

Offline Illori

  • Project Manager
  • SMF Legend
  • *
  • Posts: 50,844
Re: Needing some help Centering a navmenu
« Reply #8 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.

Offline Alexa Lynne

  • Full Member
  • ***
  • Posts: 510
  • Gender: Female
  • Transgender Women ARE Women!
    • vgkfan83 on Facebook
    • @vgkfan83 on Twitter
Re: Needing some help Centering a navmenu
« Reply #9 on: June 18, 2019, 08:21:57 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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,019
Re: Needing some help Centering a navmenu
« Reply #10 on: June 19, 2019, 11:53:51 AM »
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.

Offline Diego Andrés

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,161
  • Gender: Male
  • We know, we'll be coming
    • MeTiroAtuTia on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Needing some help Centering a navmenu
« Reply #11 on: July 15, 2019, 01:48:32 PM »
Would be much easier if you used lists to build the menu

SMF Tricks - Free & Premium Responsive Themes for SMF.