Navigation Bar

• 

  reginadavismoss · Member · Jul 7, 2017 at 3:03 am

  • Copy link
  • Add topic to favorites

  How do I change the look of the navigation bar at the top of my website? I would like titles to be in rectangular boxes and it change colors when it is the selected.

  The blog I need help with is: (visible only to logged in users)

• 

  julsyd · Member · Jul 7, 2017 at 11:42 am

  • Copy link

  Hi reginadavismoss,

  Your site is currently private so I cannot see your navigation menu. You can make it visible by going to My Site > Settings and changing the privacy to Public or Hidden.

  You can check if your theme includes options to customise the navigation menu by going to My Site > Customize.

  If it doesn’t, you’ll need to upgrade to the Premium or Business plan and change the navigation menu colours with custom CSS.

  Let us know once you’ve upgrade and the site is visible, and we’ll be happy to help you get started with the custom CSS.

• 

  reginadavismoss · Member · Jul 7, 2017 at 3:35 pm

  • Copy link

  Hello Elly,

  I have made the site visible. I went to customize and it looks like there is a CSS option. I would like the home, purpose, news, and contact us buttons to turn pink (like the logo) when you scroll over them. Also, the “Founder” drop down under the purpose tab is also a different color and shape from the others. How do I change thaT?

• 

  thesacredpath · Member · Jul 7, 2017 at 11:24 pm

  • Copy link

  Hi @reginadavismoss, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see if this gets you what you are wanting.

  .main-navigation li:hover > a {
    background-color: #E51890;
  }
  .main-navigation ul ul li {
    border-radius: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .main-navigation ul ul li a:hover {
    padding: 5px;
    border: 1px solid #fff;
    opacity: 1;
  }

• 

  reginadavismoss · Member · Jul 8, 2017 at 12:40 am

  • Copy link

  Yes it does! Why does the word “founder” in the sub menu under “purpose” have the black longer rectangle around it? How can I make it the same shape as the parent? Also, is there a way to make the hover over all of the sub menus purple with the parent remaining pink?

  Thank you!

  Regina

• 

  reginadavismoss · Member · Jul 9, 2017 at 11:16 pm

  • Copy link

  The word “founder” in the sub menu under “purpose” has a black longer rectangle around it. How can I make it the same shape as the parent? Also, is there a way to make the sub menus turn purple when you hover over them. I would like the parent menu to remain pink when you hover over it.

  Thank you!

  Regina

• 

  thesacredpath · Member · Jul 10, 2017 at 6:57 pm

  • Copy link

  The black background is the background of the submenu parent div. Do you want that transparent or want it white or?

  If we make it the same shape as the oval pink, then if you add additional menu items, it will not be oval anymore, but a panel with rounded corners. We could put a background on all the submenu items and then they would appear as a bunch of ovals over the image.

• 

  thesacredpath · Member · Jul 10, 2017 at 7:03 pm

  • Copy link

  The parent menu item remains pink and highlighted when I hover over the submenu item under Purpose.

  To make the submenu items purple when you hover them, but keep the top menu item pink, either modify this rule in your CSS, or replace it with the following.

  .main-navigation ul ul li a:hover {
   padding:10px;
   border:1px solid #fff;
   opacity:1;
    background-color: #522773;
    color: #fff !important;
  }

• 

  reginadavismoss · Member · Jul 10, 2017 at 8:08 pm

  • Copy link

  this looks great. I would like to remove the black background of the submenu parent div. If making it transparent is the best way thing to do, I am okay with that.

• 

  thesacredpath · Member · Jul 10, 2017 at 8:14 pm

  • Copy link

  I think that would be the cleanest solution. Here is the CSS.

  .main-navigation ul ul {
    background: transparent;
  }

• 

  reginadavismoss · Member · Jul 10, 2017 at 9:05 pm

  • Copy link

  Thank you. That looks great

• 

  thesacredpath · Member · Jul 10, 2017 at 10:08 pm

  • Copy link

  Awesome, and you are welcome!