[hammonjjParticipant]

I have looked at other solutions, but none seem to work with my custom version of the theme, which has both a text and image logo in the header.

See it at: http://www.joelhammon.com

I would simply like to upscale the top logo so that it completely overlaps the segment of the navbar below it.

[hammonjjParticipant]

In my attached example photo the margins on the blog posts also appear different, ignore this! It is an artifact from the sloppy Photoshopping 🙂

[Rue NelModerator]

Hello There,

Thanks for writing in!

To resolve this issue, please follow the following steps:

1] You need to remove this block of code first:

.x-logobar .x-brand.img {
    float: left;
    padding-left: 11%;
}

2] You also need to update this block of code:

.x-logobar .lb-text {
    font-size: 1.8em;
    font-weight: bold;
    font-family: "Ultra",serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.035em;
    color: white;
    text-align: left;
    padding: 32px 0 0 32px;
    line-height: 100%;
    -webkit-text-shadow: 3px 3px 2px #00132c;
    -moz-text-shadow: 3px 3px 2px #00132c;
    text-shadow: 3px 3px 2px #00132c;
}

Noticed that I removed several lines in your code.

3] And then you need to add this code at the bottom of the other codes you may have.

  .x-logobar {
    text-align: left;
    z-index: 1200;
  }

  .x-logobar .x-container-fluid.max.width {    
    margin: 0 auto;
    max-width: 1200px;
    min-height: 101px;
  }

  .x-logobar .lb-text {
    display: inline-block !important;
    float: none;
  }

  .x-logobar .x-brand.img {
    min-width: 90px;
  }

  .x-logobar .x-brand.img img {
    position: absolute;
    top: 0;
  }

Hope this helps.

[hammonjjParticipant]

Thank you! That did work for resizing/positioning… However now my background gradient is gone and the menubar is off-center… is there a way to correct this cleanly without conflicting with whatever magic you just worked on the logo?

I have one other question: I am using a child theme to save many of my changes, but frequently when I updates CSS change within the X editor, the theme reverts back to the X default. This is easy to fix, but is very frustrating when I am simply trying to preview changes. Is there some toggle in the configuration that I’ve missed that will prevent it from resetting to the default X theme from my modified child theme?

Thanks again.

EDIT: when I mean the menubar/navbar is off-center, I mean that it does not resize horizontally consistently with how the header text and logo move…

[JoaoModerator]

Hi There,

Please try adding the following code and adjusting the red, yellow to your desired colors like #ffffff, #2731ae

.x-logobar .x-logobar-inner {

background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */

}

Let us know how it goes,

I Have checked your header and it seems to be re-sizing well, at exactly what screen size you are experiencing the issue? Can you provide a screenshot, if possible)

Regarding the CSS issue could you give more details about exactly what is happening? Do you clean cache of your browser before checking the preview?
Joao

[hammonjjParticipant]

Thanks, the gradient works now.

I experience it at all desktop sizes — now that I look at it, the actual problem seems to be that the navbar is center-aligned, and I’d like it to be left-aligned (like the header content) with a (dynamic?) margin on the left so that it doesn’t get covered up by the logo portrait. Is this possible without any major division changes? The layout is almost just how I’d like it!

No, it’s not a cache or preview issue — sometimes upon saving, the live theme on the WP installation actually switches back to the default X theme rather than continuing to use to child theme. I have to manually set it back. I cant work around it, just wondering if I’m doing something wrong/if not, would like to report the bug 🙂

[hammonjjParticipant]

Ok, worried I’ve thoroughly confused you (and myself) by now, I’ve made this .gif to illustrate what I am trying to accomplish:

View post on imgur.com

Note how the navbar moves apart from the header, the content margins, etc. How to make it move together? And appear properly left-aligned?

Thank you. You’re the best.

[JadeModerator]

Hi there,

Please find this code in the customizer:

.x-logobar .x-container-fluid.max.width {
    margin: 0 auto;
    max-width: 1200px;
    min-height: 101px;
}

and update it to:

.x-logobar .x-container-fluid.max.width, 
.x-navbar .x-container-fluid.max.width {
    margin: 0 auto;
    max-width: 1200px;
    min-height: 101px;
}

Then remove this code:

.masthead-stacked .desktop .x-nav {
    position: inline;
    float: left;
    padding-left: 20%;
}

and add these:

.x-navbar .x-container-fluid.max.width {
    min-height: 0;
}

.masthead-stacked .desktop .x-nav {
    float: left;
    padding-left: 128px;
}

Hope this helps.

[hammonjjParticipant]

Perfect! Thank you!

[RahulModerator]

You are most welcome!

[Author]

Posts