Community Forums › Forums › Archived Forums › General Discussion › navigation menu question Sample Child Theme 2.1.2
- This topic has 17 replies, 2 voices, and was last updated 9 years, 3 months ago by Christoph.
-
AuthorPosts
-
January 6, 2015 at 7:20 pm #136234timothywMember
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 yellowmove 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 itThanks
http://www.securitytechmaster.comJanuary 6, 2015 at 11:10 pm #136258ChristophMemberHi,
1. Center Logo
http://wpsites.net/web-design/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.cssgenesis-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 {
Addborder-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.
January 8, 2015 at 8:31 pm #136436timothywMemberI 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
--------------------------------------------- */January 8, 2015 at 11:10 pm #136452ChristophMemberHi,
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 cssbackground: 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.
January 9, 2015 at 9:25 am #136523timothywMemberI 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.
January 9, 2015 at 12:21 pm #136756timothywMemberI cannot find that line of code, or any references to what or where "inline css" is.
Am I hopeless?January 9, 2015 at 1:58 pm #136774ChristophMemberHi,
there is always hope.
Did you install the genesis simple headers plugin?
January 9, 2015 at 2:51 pm #136780ChristophMemberOk, 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%; }
January 9, 2015 at 9:27 pm #136825timothywMemberChristoph: 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 dashboardChristoph: 1. remove the logo from Appearance – Header – Header Image
timothyw: Done. Now blank above navigation menuChristoph: 2. make sure Genesis – Theme Settings – Header is set to Image Logo
timothyw: I do not have that setting available in Theme SettingsChristoph: 3. change the code around line 898 of the style.css to
timothyw: Did it but still no logo at allThanks
January 9, 2015 at 11:01 pm #136829ChristophMemberWe 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.
January 10, 2015 at 9:22 am #136875timothywMemberThanks 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 thereJanuary 10, 2015 at 11:16 am #136891ChristophMemberYou 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; }
January 10, 2015 at 5:10 pm #136942timothywMemberThat 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!January 10, 2015 at 5:19 pm #136943timothywMemberThe logo's sides gets clipped on my android no matter how I twist the phone
zooming out doesn't helpJanuary 11, 2015 at 12:51 am #136983ChristophMemberThat 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 helpThat´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/
January 11, 2015 at 10:56 am #137064timothywMemberdon't forget to email me!
I do not use social mediaJanuary 11, 2015 at 5:25 pm #137103timothywMemberI 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 logoI'm not thinking the style and functions files are that messed up that they need to be scrapped.
ThanksJanuary 12, 2015 at 2:13 pm #137225ChristophMemberI 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?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.