Customize navigation menu and footer

Homepage › Community Forums › Aspire Theme Support › Customize navigation menu and footer

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 25, 2017 at 3:17 pm #22122
    ste
    Customer

      Hello,

      I made some changes to the CSS:

      .genesis-nav-menu a {
      color: #000;
      display: block;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 30px 15px;
      text-transform: uppercase;
      }

      .front-page .site-header.light .genesis-nav-menu > .menu-item > a {
      color: #fff;
      }

      .front-page .site-header .site-title a,
      .front-page .site-header .site-title a:hover {
      color: #000;
      }

      .front-page .site-header.light .site-title a,
      .front-page .site-header light .site-title a:hover {
      color: #fff;
      }

      .site-title {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1;
      margin-bottom: 0;
      }

      1 – In the home page everything works but on the other pages I can’t see the navigation menu because it’s black on black background instead the site title is correctly white, here an example:

      https://www.stefanocomizzoli.com/about-stefano/

      2 – I use only 2 footer widget and I want to center them and delete the third column. I try to made some changes to css but I didn’t succeed.

      I read many older topics about this but I couldn’t do it.

      Could you help me?

      Thanks in advance

      November 26, 2017 at 1:32 pm #22124
      Wes
      Moderator

        First, in order to change the font, can you tell me where you added this code? – 

        .genesis-nav-menu a {
    color: #000;
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 30px 15px;
    text-transform: uppercase;
}

        Did you add this in your customizer? If you did add this code in your customizer then I would remove it if you can.

        Next, add this to your custom CSS – 

        .front-page .genesis-nav-menu > .menu-item > a {
    color: #000;
}

        That should make the Text on the homepage Black at the top (transparent background), and white when scrolling down (black background).

        On the other pages, the text should stay white at all times.

        For the footer widgets, you can center them all in one column like this – 

        .footer-widgets .footer-widgets-1, 
.footer-widgets .footer-widgets-2, 
.footer-widgets .footer-widgets-3 {
	float: none;
	margin: auto;
	overflow: hidden;
	text-align: center;
	width: 100%;
	background-color: red;
}

        If you’re looking for something beyond that then you’ll have to create some custom code for it since it will take some extra time to get it working. You can find the code to get started on those widgets around line 2068. You can either use the first 2 widgets and leave the 3rd widget empty, or you can keep it like you have it (footer 1 and footer 3) and make your adjustments until you get it how you want it to look.

        November 27, 2017 at 9:10 am #22127
        ste
        Customer

          Thank you so much,
          I followed all the directions and it works. There’s only two clarifications.

          I removed and then added the code in my CSS customizer like you suggest, but in the navigation menu I want change not only the color but the font-size and font-weight.

          I try to add that two line like this:

          .front-page .genesis-nav-menu > .menu-item > a {
    color: #000;
	font-size: 17px;
	font-weight: 700;
}

          But it changed the font size and weight only in my homepage. I want to change it in all my site.

          2 – Now I have the footer centered but the icons of my socials appears in vertical and not in horizontal.

          This is the text I put in the widget footer 3:

          <a href="https://www.facebook.com/comizzolistefano/" rel="noopener" target="_blank"><div class=“center-content"><i class="fa fa-facebook" style="font-size:50px;color:#fa5738;"></i></div></a>

<a href="https://www.instagram.com/stefanocomizzoli/" rel="noopener" target="_blank"><div class=“center-content"><i class="fa fa-instagram" style="font-size:50px;color:#fa5738;"></i></div></a>

<a href="https://plus.google.com/u/0/+StefanoComizzoli" rel="noopener" target="_blank"><div class=“center-content"><i class="fa fa-google-plus" style="font-size:50px;color:#fa5738;"></i></div></a>

<a href="https://www.youtube.com/channel/UCtfsxNcvv07bGzmShzxA5Dw" rel="noopener" target="_blank"><div class=“center-content"><i class="fa fa-youtube" style="font-size:50px;color:#fa5738;"></i></div></a>

<a href="https://twitter.com/stecomizzoli" rel="noopener" target="_blank"><div class=“center-content"><i class="fa fa-twitter" style="font-size:50px;color:#fa5738;"></i></div></a>

          Thanks in advance for your help.

          November 27, 2017 at 9:23 pm #22131
          Wes
          Moderator

            If you want to change the font weight and size on the entire site (and not just the front page), try adding this separately – 

            .genesis-nav-menu > .menu-item > a {
    font-size: 17px;
    font-weight: 700; 
}

            For the icons, can you use the Simple Social Icons plugin? That would make it easier to add Icons and Center them with CSS.

            I usually add something like this when I use it – 

            .footer-widgets .alignleft {
  float: none;
  text-align: center;
}

.simple-social-icons ul li {
  display: inline-block;
  float: none !important;
}
          • Author
            Posts
          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.