Navigation Bar CSS Customization

• 

  vlogazul · Member · Feb 13, 2016 at 3:04 am

  • Copy link
  • Add topic to favorites

  I am using the Triton Lite theme and I would like to know if there’s a snippet for the following requests.

  1. Is there a snippet to add a copyright text at the bottom of the page on the same direction as the text that is on the right but the copyright text that i would like to add to be on the left side.

  2. Is there a snippet to change the color of the text in the navigation bar?

  3. Is there a snippet to change the custom link that says “Blog” in the navigation bar to a logo image?

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

• 

  thesacredpath · Member · Feb 13, 2016 at 8:06 am

  • Copy link

  Hi,

  1. Is there a snippet to add a copyright text at the bottom of the page on the same direction as the text that is on the right but the copyright text that i would like to add to be on the left side.

  #copyright .copytext:before {
      content: "My Copyright";
      position: absolute;
      left: 0;
      font-weight: bold;
      color: #fff;
  }
  #copyright .container {
      position: relative;
  }

  2. Is there a snippet to change the color of the text in the navigation bar?

  #access a {
      color: #ff00ff;
  }

  3. Is there a snippet to change the custom link that says “Blog” in the navigation bar to a logo image?

  This can require a good number of adjustments depending on the image. Can you upload it to your media library and then post the URL of that image for me to work with?

• 

  vlogazul · Member · Feb 13, 2016 at 8:31 am

  • Copy link

  Thank you so much for the first two snippets, awesome job. Yes i already uploaded the image into my library and this is the URL of it https://vlogazul.files.wordpress.com/2016/02/banner-logo.png

• 

  thesacredpath · Member · Feb 13, 2016 at 8:47 am

  • Copy link

  Thanks for the link. Add this to the bottom of your custom CSS to replace “Blog” with your image.

  #access #menu-item-15533 {
      background: url("https://vlogazul.files.wordpress.com/2016/02/banner-logo.png") no-repeat scroll center center /contain;
      width: 166px;
      height: 40px;
  }
  #access #menu-item-15533 a {
      text-indent: -9999px;
      display: block;
  }
  #access #menu-item-15533.current-menu-item > a, #access #menu-item-15533.current-menu-ancestor > a, #access #menu-item-15533.current_page_item > a, #access #menu-item-15533.current_page_ancestor > a {
      background: none;
  }

• 

  vlogazul · Member · Feb 13, 2016 at 9:11 am

  • Copy link

  Thank you so much for the snippet. You are a genius and your work is pretty awesome. Thanks.

• 

  thesacredpath · Member · Feb 13, 2016 at 9:11 am

  • Copy link

  You are welcome and thanks.

• 

  vlogazul · Member · Feb 29, 2016 at 6:42 pm

  • Copy link

  I would like to know if there’s a snippet for the following.

  If you click on my most recent post, you will see the social media icons on the right side of the widget section. Is there a snippet to put those media icons in the navigation bar? Next to the last category section in the menu bar and for those icon to align with the text, and if so also to change the color of those icons to the same color of the text of the navigation bar instead of the gray. Thanks

• 

  thesacredpath · Member · Feb 29, 2016 at 11:03 pm

  • Copy link

  We can do that. Add the following to the bottom of your custom CSS. I also changed the color and hover color to match your menu items.

  #wpcom_social_media_icons_widget-2 {
      position: absolute;
      top: 45px;
      right: 0;
  }
  #wpcom_social_media_icons_widget-2 .genericon {
      color: #edeef0;
  }
  #wpcom_social_media_icons_widget-2 .genericon:hover {
      color: #fff;
  }

• 

  vlogazul · Member · Feb 29, 2016 at 11:28 pm

  • Copy link

  It works perfect, the only thing is that those icons appear everywhere except the home page, is there a snippet to fix that?

• 

  thesacredpath · Member · Mar 1, 2016 at 2:55 am

  • Copy link

  The sidebar widget area does not appear on the home page so that widget is not there for us to move.

  You would need to move the social media widget into the footer sidebar and then we will have to redo the CSS.

• 

  vlogazul · Member · Mar 1, 2016 at 4:08 am

  • Copy link

  I already updated the social media icons widget and put them in the footer section. I would appreciate if you can redo the CSS snippet.

• 

  thesacredpath · Member · Mar 1, 2016 at 8:58 am

  • Copy link

  We lucked out and not too much of a change from what I originally had. For the footer widget relocation, add the following.

  #wpcom_social_media_icons_widget-2 {
      position: absolute;
      top: 45px;
  }
  #wpcom_social_media_icons_widget-2 .genericon {
      color: #edeef0;
  }
  #wpcom_social_media_icons_widget-2 .genericon:hover {
      color: #fff;
  }

• 

  vlogazul · Member · Mar 2, 2016 at 7:51 am

  • Copy link

  It worked perfectly, thanks.

  Would there be a snippet for this. If you click on the latest post, you will see an image widget on the right side. Is there a snippet for that image widget to align with the image of the article? So that both images look evenly aligned. Thanks.

• 

  thesacredpath · Member · Mar 2, 2016 at 10:10 pm

  • Copy link

  You can add some margin to the top of the image widget on single post pages with the following.

  .single .widget_image {
      margin-top: 54px;
  }