- This topic has 27 replies, 7 voices, and was last updated 9 years, 1 month ago by
.
-
Posts
-
Wes,
What is the best way to float an image logo into the nav bar area?
If you imagine the Epik demo site, what I want to do is replace the text logo with an image logo.
Is this the best way ~ http://genesistutorials.com/how-to-add-a-logo-to-the-header/ ?
Many thanks,
Terence.
All you have to do is add a logo using the WordPress Header uploader feature. Just look under “Appearance” then click “Header”. Then follow the steps to upload your logo. Keep in mind, the default logo size for epik is 1152 x 120…..so if your image is a different size, you’ll need to go into your functions.php file and change the following code to match the size of your image –
// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
'width' => 1152,
'height' => 120
) );Then once you change this and add your image to the WordPress Header uploader, it should upload just fine (without the need to crop)
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric,
That’s very true, but then I end up with a background image which not quite in the right place ~ 5 or 10px too high ~ and is, of course not clickable, so unable to point at the home page.
I am not really used of this way of working with the theme customization options. Not sure that I like some of the difficulties created by splitting these functions and styling between the CMS, the Framework and the child theme.
And another thing. The only way I have been able to put a widgetized menu in the header and still keep it only 60px high ~ like Wes does in the Epik demo ~ is to delete the Site Title and Tagline meta, which I will now have to go and put back in with Yoast’s WordPress SEO plugin, or similar.
All seems like a rather long way round to me. I would much rather Wes had left in the standard way Genesis inserts a logo image. And at the moment I can’t figure out why, if I tick the tick-box, I get a 180px high header to display ~ non existent ~ header text, and yet I get a 60px high header, if I don’t.
Feels like I have gone through the looking glass.
Terence.
Actually this is the “Standard” way to add a logo in Genesis. This is the way all of the new Genesis themes are built. You may be thinking about the old way of adding logos.
The new way is still very easy to do, it only takes me a minute or less. If you need some assistance just let us know and we can help you get it working exactly how you want it 🙂
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
The problem was the width and the height of the element in the CSS. That’s fixed now so the top widget menu longer wraps, and the header is kept to 60px high. The only thing that remains is to alter the positioning of the image in the nav bar. I can’t find a way to do it with CSS so its easy enough changed by moving down the visible image on a transparent png or gif.
Hello, this is Wes, I’ll chime in here since I’m up late 🙂 …..Were you able to get everything resolved? If not, do you have a link I can take a look at so I can tell you what needs adjusted?
Hi Wes,
Sorry I didn’t see your message in time. I am a night-bird too but even I have to draw the line at 3:30 am.
Its on a dev server, but if you put “46.149.20.184 mediacause.dev” in your host file you should be able to see how far I have got so far ~ not very far!
I have added 3 things to your original design ~ genesis sticky menu, #location scrolling on homepage and conditional menu logic, but its a long way from showtime.
Terence.
Bump
Hey Wes ~ I don’t believe you’ve visited yet, but I might be wrong.
I do know you have told me what you think needs adjusting. 😉
I believe I am looking to do the same thing as Terence. I am using the Optimal theme. I would like to move the header logo down so it partially overlaps the slider on the main page and slightly goes below the gray header background on the other pages. I am going to add a shadow to the logo and I want it to appear as if it is hovering over the header. You can see my the logo I am referring to at http://legacymillnw.com
I have done this using css on other themes. I just not sure what to change in Optimal.
Thanks in advance.
Wade
What you need is something different actually.
No guarantees, but you can try adding the following code to your #header around line 202 in your css –
`#header {
margin: 0 auto;
overflow: hidden;
position: relative;
top: 30px;
width: 960px;
z-index: 1;
}`….and then you’ll have to make the adjustments yourself to get it how you want it to appear.
Wes, Thanks for the prompt response. I tried your suggestion and had some success. The logo moves just where I want it to be. The only issue I am running into now is it messes with dropdowns on the menu. The menu appears to be in the same place but when you hover over a menu item only one dropdown item shows up instead of the entire list.
Unless you have a quick suggestion I will keep tinkering with it.
Thanks, Wade
You could add #header to the responsive section of your css and change the above code thats affecting it to “none” or “0” depending on what it is.
Hi Wes and thanks Social Strategy for the question- I have been following this post for the past few days now and it has been valuable. I was able to make a custom image, and upload it to replace the default text; per Eric’s instructions above.
Now, I am wondering, is there a way I can bring the logo down a few inches? Also, part of my image is clickable home (as brought up by Social Strategy) but how do I make the whole image clickable as a link?
In addition, is there a way I can customize “Color Style” under theme settings to further customize my logo and header background?
Thanks a bunch Wes!
Alex
@ayp510 – I’m interested in the replies to your question too. Following along.
BTW, do you have a URL we could look at?~Brian
@ayp510 you’ll need to make the final adjustment from your css file in the header section. It will most likely be in this area of your css –
`.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 50%;
}`As @hotsaucedaily mentioned if you have a link/url we can tell you exactly what you’ll need to edit to get it working.
Yep – I don’t mind sharing my URL; i’m sure it will be of great help to everyone else out there to see a live example.
http://www.healthyweightlossapproach.com/
I would like to ideally get the logo and nav to be equidistant and centered from each other.
I tried looking up the code you have posted within the “functions.php” section but I don’t see it.
Let me know what you think.
The logo/title area and the header right widget area are both too wide to fit within the 1152px space on the same line. That is what’s causing the issue. To fix this, first look around line 681 in your css file for this –
`.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 50%;
}`…..change the width to the size of your logo (which appears to be 350px).
Then look around line 697 in your css file for something like this –
`#header .widget-area {
overflow: hidden;
width: 65%;
}`….and change the width to around 60%. Once you do this, they should both sit on the same line like the demo.
Great! Thanks, it looks a lot nicer now.
Last header question: If I wanted to move the right widget (nav) more closer to the center, is that something I can adjust on Epik?
Appreciate all the help Wes.
Yes you can adjust this – “#header .widget-area” which is around line 697 in your css file. You could add “float: left;” if you wanted, or you can use other methods to move it over as well.
`#header .widget-area {
float: left;
overflow: hidden;
width: 60%;
}`@ayp510 Looks good! What did you use to get the menu into the Header Right Widget area? The Custom Menu Widget included with Epik/Genesis? I like that layout.
~Brian
I used the wordpress widget tool below ‘genesis’ as follows: appearance->header right->(then insert) a ‘custom menu’
The nav tool will be located in the header as a result.
To line up the nav bar with your logo, re-read some of the past posts between me and Wes. Most of your questions should find answers as a result.
Hi Wes,
After looking at the header area, i’m happy with how it looks but I would like to make a few adjustments.
I noticed in the original template, that when you hover the mouse above a menu item, it highlights.
1) How do I have the same hover highlight effect with my current nav-bar?
2) How do I increase the spacing between nav-menu items? Let’s say I wanted the nav menu to have equal spacing beginning from left to right?Thanks!
This is a theme issue, I just noticed it the other day. I’ll have an update for it soon. Until then you can do this to fix it –
Remove this from line 2730 in your css –
.epik-black #header a { color: #fff; }To adjust the spacing take a look around line 1054 for this –
#header .genesis-nav-menu a { padding: 14px 20px 5px 0; padding: 0.875rem 1.25rem 0.3125rem 0; }Hello! I have been following this post during the course of our current site development and thanks to the helpful advice here, I finally have things looking the way I want – well, almost! Following Eric’s advice at the beginning of the discussion, I successfully changed my header image size in order to upload a custom logo. The image link action (to site home) behaves as it should, and the Genesis nav menu fits in the header-right widget correctly (when viewed at full size).
The only issue I have with this now – and hopefully there’s an easy fix for this – is that my logo and nav menu both float left and this looks slightly “off” when viewed on my iPhone, when all other content divs below are centered. Is there one best-practice solution for centering my logo image and top nav (like in the Epik demo) at this screen size?
*Also, in Wes’s Epik Widget location guide http://appfinite.com/topic/epik-widgets-guide/, I notice the header area features some additional links that are not present in the demo version. I’m considering adding a couple of simple links like this to my header, and I wonder what might be the best way to go about this in order to achieve something like Wes’s example.
Hello @Michael,
Yes please post a link to your site so we can be able to see what the issue is.
For any other questions (in reference to your 2nd question), you’ll have to create a separate thread/topic since we have a “One Question Per Thread” policy….this just helps us keep things organized, and makes it easier to search for topics.
Thanks
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
@Michael
I’m looking forward to learning how you accomplished your header image settings.
Please post your link here for us to learn from.Thanks!
- You must be logged in to reply to this topic.