Header Nav Style

Support Area Forums Kerygma Header Nav Style

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://
  • Author
    Posts
  • #32528
    Avatar photoZac Manor
    Participant

    Would it be pissible to make one of the headers (specifically the one all the way to the right) a different style than the rest.

    I’m wanting to have one that says “connect” that is more of a button than a word that is a link,

    #32529
    Bill Robbins
    Moderator

    Hi Zac,

    You can do that. Here’s how I would go about it:

    1. In your WordPress dashboard go to the Appearance section and click on Menus.
    2. In the top right corner, click on the screen options tab. Check the box by css classes and close the screen options.
    3. Next click the down arrow at the end of the menu item you’d like to change. In the field for the css classes enter:
      
      button
      

      and save your menu.

    4. Next go to your theme options page and choose the Advanced tab.
    5. Scroll down to the Custom CSS box and add this:
      
      #header li.button a {
      	color: #fff;
      	background-color: #5d7c88;
      	transition: all 0.2s ease-in-out;
      	-moz-transition: all 0.2s ease-in-out;
      	-webkit-transition: all 0.2s ease-in-out;
      	cursor: pointer;
      	font-weight: bold;
      	padding: 12px 18px;
      	text-decoration: none;
      	border: none;
      	white-space: nowrap;
      	border-radius: 0;
      	-webkit-border-radius: 0;
      	-moz-border-radius: 0;
      	-webkit-appearance: none;
      	-webkit-background-clip: padding-box;
      }
      
      #header li.button a:hover {
      	color: #fff;
      	background-color: #feb41b;
      }
      
    6. Change the background and colors there. The top style will be the default state and the bottom the hover.
    7. Update your settings.

    See how that works for you. Feel free to change the spacing and so forth to meet your needs.

    Let me know if you have any trouble,
    Bill

    #32601
    Avatar photoZac Manor
    Participant

    yeah, this worked great.

    although the text color follows what i have set for the nav menu with or without the botton. is it possible to change how the text color works just for the button

    i know.. picky designer questions 🙂

    #32605
    Bill Robbins
    Moderator

    It may need a bit more specificity. Try adding !important tags like this:

    
    #header li.button a {
    	color: #fff !important;
    	background-color: #5d7c88 !important;
    	transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-webkit-transition: all 0.2s ease-in-out;
    	cursor: pointer;
    	font-weight: bold;
    	padding: 12px 18px;
    	text-decoration: none;
    	border: none;
    	white-space: nowrap;
    	border-radius: 0;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	-webkit-appearance: none;
    	-webkit-background-clip: padding-box;
    }
    
    #header li.button a:hover {
    	color: #fff !important;
    	background-color: #feb41b !important;
    }
    

    and see if that does the trick.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Header Nav Style’ is closed to new replies.