navigation menu question Sample Child Theme 2.1.2

[timothyw]

Hi

I hope I am not exceeding some rule about the number of questions in a topic.

I want to
center the logo and fill in each side of it yellow

move the primary navigation menu down a little
make it top and bottom of this primary navigation menu horizontal lines instead of solid black or be able to reduce its height and change the color
put a home button in it

Thanks

http://www.securitytechmaster.com

[Christoph]

Hi,

1. Center Logo

How To Center Your Header Image or Logo In Genesis Sample Theme

Change line 865 of the style.css to
.site-header .wrap {
padding: 40px 0;
width: 400px; /* Add This Line With Image Width */
}

2. Move Primary Navigation down
Around line 1041 of the style.css .nav-primary {
add
margin-top: 5px;
change the 5 to any value you prefer.

3. Change color of the background of the Primary Navigation
Around line 1041 of the style.css .nav-primary {
change
background-color: #333
to any hex color code you want.

4. Change the "height" of the Primary Navigation
Around line 947 of the style.css genesis-nav-menu a {
change the first value (30px) of
padding: 30px 24px;

5. Add border around Primary Navigation
Around line 1041 of the style.css .nav-primary {
Add

border-top: 5px solid #fff;	
border-bottom: 5px solid #fff;

Change the 5px value to change the thickness of the border and the #fff to change the color of the border.

6. Home Button
In WordPress go to Appearance - Menus - Links. Enter your website address at URL and Home at Link Text.
Click Add to Menu.
Drag and Drop the new Home menu item to the top of the menu items.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

I am not having any success centering my logo
I changed width and then padding but saw no movement.

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
background-color: #fff;
min-height: 204px;
}

.site-header .wrap {
padding: 100px 0;
width:735px;
}

/* ## Title Area
--------------------------------------------- */

[Christoph]

Hi,

I´m not sure if you are using a plugin to get your new logo as background into the header.
If you can adjust the following line of inline css

background: url(http://www.securitytechmaster.com/wp-content/uploads/2015/01/1-8-2015-logo735x204.png) no-repeat !important;

to include center like so:

background: url(http://www.securitytechmaster.com/wp-content/uploads/2015/01/1-8-2015-logo735x204.png) no-repeat center !important;

your logo will be centered.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

I am so inept at this.
Every victory results in another obstacle. Like life.
I got the Home to appear in my navigation menu though!
Didn't start customising the menu bar yet, got hung up on this logo thing.

I am concerned that I am not keeping a log of changes I am making, even though it is a child theme and will not corrupt the parent. Maybe a looseleaf!

Anyway Thanks for your help.

I use appearance> header> header image
My logo image is 735 X 204 and stays on the left.

I installed a plug-in Custom Headers a few days ago but cannot get it do what I want, maybe I should deactivate it first?

I will dive back into this later. I'm glad you are monitoring posts.

I do not receive email notifications, I just post then take a look after a while, and you were there.

http://www.securitytechmaster.com

[timothyw]

I cannot find that line of code, or any references to what or where "inline css" is.
Am I hopeless?

[Christoph]

Hi,

there is always hope.

Did you install the genesis simple headers plugin?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Christoph]

Ok, why don´t you try the following:

1. remove the logo from Appearance - Header - Header Image
2. make sure Genesis - Theme Settings - Header is set to Image Logo
3. change the code around line 898 of the style.css to

.header-image .site-title > a {
	background: url(http://www.securitytechmaster.com/wp-content/uploads/2015/01/1-8-2015-logo735x204.png) no-repeat center;
	float: left;
	min-height: 204px;
	width: 100%;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

Christoph: Did you install the genesis simple headers plugin?
timothyw: I hadn't done that but just did. However I do not see it in the dashboard anywhere. I had already installed Simple Sidebars which shows up in the dashboard

Christoph: 1. remove the logo from Appearance – Header – Header Image
timothyw: Done. Now blank above navigation menu

Christoph: 2. make sure Genesis – Theme Settings – Header is set to Image Logo
timothyw: I do not have that setting available in Theme Settings

Christoph: 3. change the code around line 898 of the style.css to
timothyw: Did it but still no logo at all

Thanks

[Christoph]

We will get this sorted out.

My Question about the genesis simple headers plugin was just to find out if the inline css came from this plugin.
By installing and activating it, step 2 became impossible because the plugin is hiding the header settings...

I´m sorry about the confusion. I didn´t express myself clearly enough.

Please deactivate the Genesis Simple Headers plugin.
Now you should see the Genesis - Theme Settings - Header settings area.
Make sure it is set to Image Logo.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

Thanks for your perseverance.
My wife is telling me I better get this site going soon!

Please deactivate the Genesis Simple Headers plugin.
That was weird. I installed and activated it late yesterday, but could not see it in the dashboard. Then I looked at the developers page and saw an end of life statement and a bunch of posts about how the plug-in would not install properly, just like my own experience.

But this morning (Eastern Time USA) the plugin was there where it was supposed to be.

Yesterday I restarted Chrome and reloaded the page, and did everything short of restarting the PC.

So I just deactivated the plugin:
====
christoph: Now you should see the Genesis – Theme Settings – Header settings area.
Make sure it is set to Image Logo.
timothyw: That option is not in there

[Christoph]

You must have made some customizations that you didn't tell me about 😉

Next thing that works for me:

Around line 865

.site-header {
	background-color: #fff;
	min-height: 204px;
}

add
background: url(http://www.securitytechmaster.com/wp-content/uploads/2015/01/1-8-2015-logo735x204.png) no-repeat center !important;

So it looks like this:

.site-header {
	background-color: #fff;
	min-height: 204px;
	background: url(http://www.securitytechmaster.com/wp-content/uploads/2015/01/1-8-2015-logo735x204.png) no-repeat center;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

That did the trick!
This calls for a celebration.

regarding changes unknown.

I'm sure I made changes before posting for help on this forum.

Is there a plug-in that tracks changes?

I was into functions.php and style.css numerous times.

Suggestions as how also to reset to clean versions of these files and adding back the minimum changes to be here?

If you think I should just move forward with what I have, I will.
Or suggestions as how also to reset to clean versions of these files and adding back the minimum changes to be here?

You know of course that now, I am moments away from my next issue.

I signed up to get notified when your site goes live.
If you do consulting, maybe you could give me an idea of how you charge.

My next post will be onto this unless I'm told to start a new one.
Thanks again!

[timothyw]

The logo's sides gets clipped on my android no matter how I twist the phone
zooming out doesn't help

[Christoph]

That did the trick!
This calls for a celebration.

Indeed it does! 🙂
I´m happy we got that done.

regarding changes unknown.

I’m sure I made changes before posting for help on this forum.

Is there a plug-in that tracks changes?

I´m not aware of any plugin that tracks changes to css and php.

I was into functions.php and style.css numerous times.

Suggestions as how also to reset to clean versions of these files and adding back the minimum changes to be here?

If you think I should just move forward with what I have, I will.
Or suggestions as how also to reset to clean versions of these files and adding back the minimum changes to be here?

Ideally, you´d want to built it right.
Realistically, you already spent a lot of time trying to get it right and your wife is growing impatient...

You know of course that now, I am moments away from my next issue.

Yes, I see the next issue. It made me hesitate to just say above "Let´s continue with what we have" 😉

I signed up to get notified when your site goes live.

Thank you. That is very kind of you.

If you do consulting, maybe you could give me an idea of how you charge.

Yes, I have limited consulting spots. Send me an email to info at my domain name and give me an overall idea what you want your website to do for you, what you want to offer, what features you want to have, what marketing you want to do... That will help me get an idea of the scope of the project and what I could offer you.

At the end of the day, you have to answer the question whether the time you spent on trying to figure all this out wouldn't be better spent on creating content and marketing material for your website.

The logo’s sides gets clipped on my android no matter how I twist the phone
zooming out doesn’t help

That´s because the header is not responsive. Here is a tutorial that explains how to fix that (It needs some adjusting for your website):

http://thepixelista.com/responsive-genesis-child-theme-logo/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[timothyw]

don't forget to email me!
I do not use social media

[timothyw]

I am so new here that I didn't realise the WP editor allows you to edit functions.php too. hadn't noticed.

and that tool to load your site to see how the logo is rendered is great.

But I do not know how to use the templates thing; how many different size logos to upload, nor understand the stuff about "media only screen and"

Actually the pixelista code is very close to what's in there, except instead of width=100%
it's the width of the logo

I'm not thinking the style and functions files are that messed up that they need to be scrapped.
Thanks

[Christoph]

I am so new here that I didn’t realise the WP editor allows you to edit functions.php too. hadn’t noticed.

That is commonly referred to as "cowboy coding". A mistake will break your website and you won´t be able to correct it with the WP editor. Make sure you have access to your website through cpanel or ftp.

But I do not know how to use the templates thing;

The template is just an illustration of sizes that are used by mobile devices.

how many different size logos to upload, nor understand the stuff about “media only screen and”

Starting around line 1344 of the style.css are the settings that are being used for different sizes of screens.
They are being called media queries and start with @media only screen and (max-width: ****px)
You can create a different sized logo for all the different media queries or even add more media queries for smaller screens...

I’m not thinking the style and functions files are that messed up that they need to be scrapped.

I agree.

Did you receive my emails?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts