Julie Ealy

Yes, this helps a lot. Thank you. I think I was trying to make it more difficult than it was. I appreciate it.

Hi,

I used the RealFaviconGenerator as the G (for Genesis) favicon kept reappearing in Chrome (fine in Firefox). Even though I put my personal favicon in the Prose child-theme “images” folder nested in “themes” in my Go Daddy FTP. Deleting Genesis favicon in the images folder of “Genesis” theme for good measure. (Still the G would appear on diff. platforms.)

The RFG solved my problem with Chrome — as my personal favicon now shows up in it.

But Safari and other browsers, and on mobile devices, there is no favicon at all. Just generic. Compatibility for RFG is explained in great depth at this link: https://realfavicongenerator.net/favicon_compatibility#.VBBvY0jORnY

The Notes at bottom explain.

I am a stickler for thoroughness, so am still pursuing this. The RFG homepage says that if I put in instructive HTML code in my images.php under <header>, the different platforms will upload my favicon.

Here is the code I am looking to paste somewhere (THIS IS MY QUESTION, REALLY…WHERE TO PASTE? FTP? Custom CSS)

As this may help you know what I am talking about:
<link rel=”shortcut icon” href=”https://www.julietrump.com/path/to/icons/favicon.ico”&gt;
<link rel=”apple-touch-icon” sizes=”57×57″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-57×57.png”&gt;
<link rel=”apple-touch-icon” sizes=”114×114″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-114×114.png”&gt;
<link rel=”apple-touch-icon” sizes=”72×72″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-72×72.png”&gt;
<link rel=”apple-touch-icon” sizes=”144×144″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-144×144.png”&gt;
<link rel=”apple-touch-icon” sizes=”60×60″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-60×60.png”&gt;
<link rel=”apple-touch-icon” sizes=”120×120″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-120×120.png”&gt;
<link rel=”apple-touch-icon” sizes=”76×76″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-76×76.png”&gt;
<link rel=”apple-touch-icon” sizes=”152×152″ href=”https://www.julietrump.com/path/to/icons/apple-touch-icon-152×152.png”&gt;
<link rel=”icon” type=”image/png” href=”https://www.julietrump.com/path/to/icons/favicon-196×196.png&#8221; sizes=”196×196″>
<link rel=”icon” type=”image/png” href=”https://www.julietrump.com/path/to/icons/favicon-160×160.png&#8221; sizes=”160×160″>
<link rel=”icon” type=”image/png” href=”https://www.julietrump.com/path/to/icons/favicon-96×96.png&#8221; sizes=”96×96″>
<link rel=”icon” type=”image/png” href=”https://www.julietrump.com/path/to/icons/favicon-16×16.png&#8221; sizes=”16×16″>
<link rel=”icon” type=”image/png” href=”https://www.julietrump.com/path/to/icons/favicon-32×32.png&#8221; sizes=”32×32″>
<meta name=”msapplication-TileColor” content=”#da532c”>
<meta name=”msapplication-TileImage” content=”https://www.julietrump.com/path/to/icons/mstile-144×144.png”&gt;
<meta name=”msapplication-config” content=”https://www.julietrump.com/path/to/icons/browserconfig.xml”&gt;

So the upshot is that it has nothing to do with the device or computer. The nav bar looks fine in Firefox, but not in Chrome or Safari. I had to compromise Firefox to make it right in Chrome. But the drop down sub menu does is still compressed at the top in Chrome or Safari due to the large Header image.

I did figure out how to place the nav bar under the Header image with the code snippet below. But it looked hideous. So I just put a message in the content of my Homepage to either use Firefox or scroll past the Header to access the menu items. Kind of a hackneyed solution, but what else can you do when it looks perfect in one browser and not the other?

I put this code snippet in the Edit CSS stylesheet using Genesis Prose to make the nav menu bar appear below the header. (But there was some strange shadow “bar” that stayed at the top as I scrolled down (my nav bar scrolls). Anyway, it ruined the look of the Website, so I switched it back. But in case anyone out there is interested:

//* Reposition the primary navigation menu
remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
add_action( ‘genesis_after_header’, ‘genesis_do_nav’ );

So the upshot is that it has nothing to do with the device or computer. The nav bar looks fine in Firefox, but not in Chrome or Safari. I had to compromise Firefox to make it right in Chrome. But the drop down menu does not work at the top in Chrome or Safari due to the large Header image.

I did figure out how to place the nav bar under the Header image with the code snippet below. But it looked hideous. So I just put a message in the content of my Homepage to either use Firefox or scroll past the Header to access the menu items. Kind of a hackneyed solution, but what else can you do when it looks perfect in one browser and not the other.

I put this code snippet in the Edit CSS stylesheet using Genesis Prose to make the nav menu bar appear below the header. (But there was some strange “bar” that stayed at teh top as I scrolled down (my nav bar scrolls). Anyway, it ruined the look of the Website, so I switched it back. But in case anyone out there is interested:

//* Reposition the primary navigation menu
remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
add_action( ‘genesis_after_header’, ‘genesis_do_nav’ );

In my infinite wisdom, I just figured out that the Header is what is hanging up the Nav Bar submenus. Because once one has scrolled past the header, the Nav Bar with accessible submenus is fine.

So now I would like to know how to put the nav bar below the Header. I will have to sacrifice a good look for functionality.

Do I need a code snippet or is there a simpler way to do this?

https://www.julietrump.com

I started on my Mac with my 2 social icons half on nav bar, half off. But on my son’s Alienware computer, the top of social icons were butted up against the top of the page and not entirely visible. So this Edit CSS stylesheet code in Genesis seemed to work:

#simple-social-icons-2 {
position: absolute;
z-index: 40000 !important;
width: 120px;
top: -15px !important;
left: -20px;
}

Now the social icons are right where they are supposed to be on the Alienware, and below the nav bar on my Mac. But I am just going to deal with it.

Seems even if page looks good on my mac, I have to add new code so that it appears somewhat correct on other devices and computers (like my iPad).

But alas, now the submenu on the Alienware is compressed (just a black compressed box — not the three submenu items). So have to go back in and fix that.

Any coding snippets for a compressed submenu(s)???? That you can help me out with? I sure would appreciate it.

I did it I think. In the paste below I added a new line that says “heigh: 1.em;
Here is the code I used, and now the nav bar looks more “full:”

#nav .wrap {
background: transparent !important;
border: none;
/*box-sizing: border-box;*/
overflow: hidden;
width: 100%;
height: 1.em;

The only problem with that was my social media buttons are now on top of the last menu item in the nav bar. Now Don’t know what to do about that. The code I found using Firebug Fix plugin (element inspector that is better than the default) might help me figure out a way.

}

Renee’ — I deactivated Jetpack — and indeed the compressed nav bar on the homepage was restored. That’s the good news. The really bad news is that my Edit CSS customizatios went completely away (Genesis Prose Child theme). Which meant the hours and hours I put into making my site look somewhat professional also went away. Apparently the Edit CSS in Genesis is tied to Jetpack. (ugh)

So it seems I have two unfavorable choices. Either can have a normal-size nav bar on Homepage with ugly-looking site. Or I can have a nice-looking site — and a nav bar that is practically useless because it is so compressed.

I did try playing with the CSS Editor, and I did manage to make the nav bar more vertical (wider) on all the pages — except the Homepage where the problem lies. I made the nav bar bigger by adding “height: 70px;” to the following on the stylesheet for Edit CSS:

.menu-item-object-page a:active, .menu-item-object-custom a:active {
color: #333333 !important;
height: XXpx;
}

Does anyone know a custom code for de-compressing the Nav BAr on the homepage only?

Someway I can get around Jetpack?

Thank you.

Have to add that the Homepage nav bar does miraculously reappear as one scrolls down the page. Another clue that it has nothing to do with CSS or my developer — and probably everything to do with Jetpack.

And the jetpack saga continues. Whereas yesterday my nav bar was okay…last night see that it is “squished.” In other words, looks like someone was messing with the .em code. This is ONLY on the Home page, so I know it is nothing to do with the CSS coding in general. And…only on certain devices. But it looked squished on my son’s Alienware computer as well. As jetpack seems to be messing with my site(s) every which way…sure this can be attributable. And thought you should know jetpack.

Was finally able to get into WordPress by going through “can’t remember password,” and resetting it. (I am 100% sure I was using the correct password to begin with.)

What the bloody bleep. I cannot even log into my WordPress site because jetpack cannot connect. I am trying to log on using the Word Press sign in, and I still can’t. When Jetpack was doing its little update last week or week before…another site, my entire blogsite, disappeared. The error message came up jetpack — the only thing that came up. This is completely unacceptable. When do you think Jetpack will be done and I can get back into my dashboard. Is there anything I can do to get around jetpack?

You are in your Dashboard “Add New Page.”

Did you download TinyMCE from WordPress? And save it to your Desktop or someplace on your computer where you can find it?

Then did you go to Plugins in your WordPress Dashboard and click “Add New”?

Once you were there, in “Install Plugins” did you click on “Upload” in blue at the top?

Then did you click on the “Browse” button? Which takes you to your computer files. And then click on TinyMCE where you saved it on your computer? And hit a blue button on your computer that says “select” or something like that.

If you did all that, then you can continue with my other instructions about going to “Settings” on your WordPress Dashboard, click on TinyMCE, which should be there in the sub menus now. This takes you to Editor Settings. In Editor Settings, drag the TinyMCE icon buttons you want into the (blank) toolbar space above. Make sure to check the “Load CSS” box. Return to your New Page, and toggle the toolbar, last icon button on the end, top row. The TinyMCE toolbar you just created should drop down if it is not there already.

You need to switch from Text to Visual on the tab to the far right first. Then hold your curser over a square box that looks like it has a grid on it. Best I can describe. It will say “Toggle Toolbar.” If you have uploaded Tiny MCE correctly it will flip down. I am assuming you have gone into Settings on your Dashboard. Then gone to TinyMCE Advanced in the dropdown. That takes you to Editor Settings in Tiny MCE where you drag the functions you need onto the toolbar. Also make sure you check Load CSS style sheets or something like that.

I am including a screenshot. The Toggle Toolbar is in the top row on the end. Make sure you are in Visual and not Text.

https://screencast.com/t/7RrwIstcGMmn

Well, I am eating crow now…but happily. I did have the text toolbar (i.e, “Souce,”Insert,”) for TinyMCE but could not find the icon toobar with all the functions, which I had customized (Dashboard Settings?TinyMCE). Then after six hours of strife, I saw an icon on the WordPress Toolbar that said “Toggle” (toggle something). I hit it and the TinyMCE toolbar appeared! I almost started crying. I am posting my folly just in case anyone else is another blind mice…there it is. (Please post a response if so.)

Well, I am eating crow now…but happily. I did have the text toolbar (i.e, “Souce,”Insert,”) for TinyMCE but could not find the icon toobar with all the functions, which I had customized (Dashboard Settings?TinyMCE). Then after six hours of strife, I saw an icon on the WordPress Toolbar that said “Toggle” (toggle something). I hit it and the TinyMCE toolbar appeared! I almost started crying. I am posting my folly just in case anyone else is another blind mice…there it is. (Please post a response if so.)