Announcement

Collapse
No announcement yet.

Replace home tab in navbar with image

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Replace home tab in navbar with image

    Hi. I want to include my site logo in my navbar, and came across this solution of replacing the "home" tab with an image:
    http://cobaltapps.club/forum/ma...nstead-of-text

    My question is, how do I implement that in DWB? I tried adding the css code mentioned in the linked topic in Dynamik Custom> Custom CSS, but that didn't seem to work. Would really appreciate any guidance on this as I'm a novice at this.

    Thanks!
    Sean

  • #2
    Sean, you need to give us something to look at (URL), as we can only guess you are using the primary nav but we don´t know the ID or class of the tab in question.

    Comment


    • #3
      Hi irishrunner16,
      I have made something lik this on my website: http://www.pcf.pl
      This is the Catalyst website but in Genesis you can do the same with easy. This should works for you:

      PHP Code:
      #menu-main-menu li:first-child a {
       
      colortransparent !important;
       
      backgroundurl(images/logo.pngcenter center no-repeat;




      Regards,
      Robert Gabriel


      Last edited by robert; 10-30-2016, 11:34 PM.

      Comment


      • #4
        @Siga. Thanks for the reply. The url to my site is http://coolrunning.com/wpcalendar

        @ Robert, thanks for sharing what you've done for your site. I checked out your page and tried adding the code to my site. I got it to work, but my submenu items are showing the image as well (hover over the Events tab to see what I mean).

        How can I tweak the css so that:
        1. the image only is shown for the "Home" tab
        2. I can keep the main background as color, and have the "home tab display a white background under the image

        Thanks guys!
        Sean

        Comment


        • #5
          If you use the ID of that menu item, your CSS is more specific and will not apply to other menu items, so you can achieve the wanted effect (assumed the menu item won´t have submenu-items):

          Code:
          li#menu-item-16 a {url("images/cr_logo_horizontal.gif") no-repeat scroll center center #ffffff;}

          Comment


          • #6
            Hi irishrunner16,

            Try this:


            PHP Code:
            #menu-main-menu li:first-child a {
                
            colortransparent !important;
                
            background#FFFFFF url(images/logo.png) center center no-repeat;
            }
            #menu-main-menu .sub-menu li:first-child a {
                
            color#XXXXXX !important;
                
            background#XXXXXX;
            }
            #menu-main-menu .sub-menu li:first-child a:hover {
                
            color#XXXXXX !important;
                
            background#XXXXXX;





            Regards,
            Robert Gabriel


            Last edited by robert; 10-30-2016, 11:34 PM.

            Comment


            • #7
              Thanks guys.

              @SiGa, I tried adding the css you provided but for some reason the image isn't being displayed. Do I need to change something further?

              Code:
              #menu-main li#menu-item-16 a {url("images/cr_logo_horizontal.gif") no-repeat scroll center center #ffffff;}
               width: 120px;
              }
              @Robert, thanks! I tried the set of css you mentioned and it seems to work fine. If Siga's shorter version doesn't end up being an option it looks like I'd be able to use yours.

              Comment


              • #8
                Sorry, my bad, I left out something essential (and additionally, it seems you added a bracket too much for the width). Here it comes again, polished and all new:

                Code:
                #menu-main li#menu-item-16 a {
                background: url("images/cr_logo_horizontal.gif") no-repeat scroll center center #ffffff;
                width: 120px;
                text-indent: -99999px;
                }
                Worked for me when I tested on your site with dev tools.

                Comment


                • #9
                  Works great Siga! Thanks so much, I really appreciate your help!

                  Comment


                  • SiGa
                    SiGa commented
                    Editing a comment
                    Glad I was able to help.
                Working...
                X