Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling the Header
- This topic has 9 replies, 2 voices, and was last updated 8 years, 3 months ago by gucu.
-
AuthorPosts
-
December 9, 2015 at 7:14 am #173312gucuParticipant
Hi All
I am still trying to learn how to use the Genesis Framework and am reading as much as I can get but struggling as to the best way to do something. So am currently trying to style a new site. This is the site:
http://gucu.org.uk/I would like the menu to be at the top of the page, with a bit of transparency and the featured image to settle behind it. And then the site title and description to be left aligned at the top.
Is there a tutorial that can give me an indication of what I need to do please?
Thanks
Rich
http://gucu.org.uk/December 9, 2015 at 1:48 pm #173358gucuParticipantHi
I am just beginning to attempt to dig into how to make the header work.
A for instance I have opened header.php and it points to lots of do actions and genesis before header etc.
So where do I find information or help on changing the header format please?
Thanks
Rich
December 9, 2015 at 1:59 pm #173359carasmoParticipantYou never touch the header.php file in Genesis parent. You only use Child Themes that you buy or create with Genesis. I see you're using the Sample theme, that's good.
I will assume that you want an image behind the .site-header and this is the same image for the entire site.
This is accomplished with CSS and you would edit your style.css file using a code editor for the best results. Use your developer tools and you'll find that .site-header is the parent of all things that reside in the header. That is where you would put a background-image. The title of the site and the description should be showing up if you've set up the site identity portion of your settings General section.
.site-header { background-image: url(absolute/path/to/image.jpg); background-size: cover }
Google for more information on Background size and other CSS knowledge.
You would use the header-right widget to put in a custom menu you've set up in the menu, under Appearances.
December 9, 2015 at 2:06 pm #173363gucuParticipantHi
Thanks for the answer. What I am hoping to do is to move the menu to the top of the page and then have the featured image below that. I was going to give the menu a slight opaqueness. The site title and tag would then sit to the left and the search bar to the right. The image is going to stretch right across the site as is with the current wild image.
Having said all of the above, I am happy with css but struggling to get past the first Genesis hurdle!
Thanks
Rich
December 9, 2015 at 2:07 pm #173364gucuParticipantBy the way meant to say thanks. I am not editing the header.php and will open functions up.
Rich
December 9, 2015 at 2:26 pm #173368gucuParticipantOk. One step on. I have inserted the following code into the functions file:
/* Reposition the primary navigation menu remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_header', 'genesis_do_nav' );
The problem is it doesn't appear to have done anything. I will continue looking.
Thanks
Rich
December 10, 2015 at 3:22 pm #173483gucuParticipantHi
Today I have switched off the plugins and no change at all. Is there someone that can offer some advice on how I might trouble shoot this or is there a support system. It seems to me that if a hook doesn't work then that would count as a bug and should be fixed.
Any thoughts?
Thanks
Rich
December 10, 2015 at 3:46 pm #173485gucuParticipantI have moved it using css but the header is still showing full width so I haven't really achieved anything. Is it possible to get rid of the header code totally and maybe put the title and tagline in the nav bar or over the featured image please?
Thanks
Rich
December 11, 2015 at 6:08 am #173524gucuParticipantOne last shout out for help. I have done exactly as documented according to the code snippets and it hasn't worked. I shut down plugins and still nothing. What else can I do please?
Thanks
Rich
December 13, 2015 at 2:06 pm #173698gucuParticipantWell I found the problem. I created a test site and uploaded Genesis child and did everything exactly the same. The code worked perfectly. It appears there is a problem with the plugin Genesis Featured Image in the header. I have deleted it but the code is now working, just the featured image is not loading accept on the front page. Any ideas on how I can clean the code up please?
Thanks
Rich
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.