Logo image in the nav-bar?

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

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

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 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.

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.

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

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!

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 https://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