Make Header bigger

Support Area Forums Foundation Make Header bigger

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://www.micahfredericksburg.org/staff-group/professional/
  • Author
    Posts
  • #35759
    Meghann Cotter
    Participant

    I am trying to add a donate Button to the upper right hand side of my Header. I found instructions on how to do that in another thread, but the header really needs to be taller for it to look right. Is there a way to expand the header height?

    Meghann

    #35762
    Bill Robbins
    Moderator

    Hi Meghann,

    Great question. The header doesn’t have a fixed height set in the theme. Most likely to create the space you’re wanting we’ll need to add in some padding or margins to the button. I’d be glad to help you out if you want to add the button and then let me know when it’s ready. I can then show you how to go about it.

    Thanks,
    Bill

    #35854
    Bill Robbins
    Moderator

    Thanks for sending over the link Meghann. Here’s what I would do. Let’s replace the code in the Custom CSS box with this:

    
    @media only screen and (min-width: 768px) {
    
    	#header-button {
    		position: absolute;
    		right: 0;
    		top: 90px;
    	}
    	
    	#logo {
    		margin-top: 25px;
    		margin-bottom: 80px;
    	}
    
    }
    
    @media only screen and (max-width: 767px) {
    
    	#header-button {
    		width: 100%;
    		display: block;
    		text-align: center;
    	}
    
    }
    

    In that snippet, the margin-top and margin-bottom of the #logo will set the height of the header. Since the button is absolutely positioned, its size and margins won’t be considered when it comes to determine spacing. That’s why it’ll work best to adjust the logo.

    You can move the logo around by increasing/decreasing the top and bottom margin there. You can also change the logo’s size to cause a change as well.

    Those snippets are made to use media queries so they’ll only impact certain screen sizes. For smaller screens the button is set to be center aligned in the header.

    Give that a shot and let me know if you have any questions or trouble.

    Have a great weekend,
    Bill

    #35861
    Bill Robbins
    Moderator

    Glad to hear that did the trick 🙂

    #35884
    Bill Robbins
    Moderator

    One simple way to give a hover effect to an image button is to change the opacity of it slightly. You could add in this CSS snippet to do that:

    
    #header-button:hover {
    	opacity: .9;
    }
    

    That should change the opacity just a bit when the user hovers over the link. You can change the amount by adjusting the .9 in that snippet. 1.0 is completely opaque and 0 is transparent.

    Hope that helps out,
    Bill

    #35886
    Bill Robbins
    Moderator

    Glad to hear that worked for you 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Make Header bigger’ is closed to new replies.