Navigation Menu Bar in Solid Color & Scroll to Top

1. Making the Navigation Menu Bar in solid color to avoid overlapping texts when the Sticky Menu featureis invoked; and

/* Change nav menu background and link color */
#top #access .menu li a,
#top #access{
	background:#fff;
	color:#000;
}

2. A shaded button with “^” sign at lower right to allow Scrolling to Top of a web page for a reader’s convenience, when is a webpage becomes too long?

https://gist.github.com/tenman/9361514

$nobita_external_link_value =<<<SCRIPT

jQuery(function() {

	jQuery(window).scroll(function () {

		if (jQuery(this).scrollTop() > 100) {

			jQuery('#access').css({'position':'fixed','top':'0','z-index':'999','margin':'0'});
			jQuery('.logged-in #access').css({'position':'fixed','top':'29px','z-index':'999','margin':'0'});
		} else {
			jQuery('#access').css({'position':'static'});
			jQuery('.logged-in #access').css({'position':'static'});
		}

	});

});

SCRIPT;

Change below

$nobita_external_link_value =<<<SCRIPT

jQuery(function() {
	var topBtn = jQuery("#page-top");
	topBtn.hide();

	jQuery(window).scroll(function () {

		if (jQuery(this).scrollTop() > 100) {

			topBtn.fadeIn();

			jQuery('#access').css({'position':'fixed','top':'0','z-index':'999','margin':'0'});
			jQuery('.logged-in #access').css({'position':'fixed','top':'29px','z-index':'999','margin':'0'});
		} else {

			topBtn.fadeOut();

			jQuery('#access').css({'position':'static'});
			jQuery('.logged-in #access').css({'position':'static'});
		}

	});

	topBtn.click(function () {
		jQuery("body,html").animate({
		scrollTop: 0}, 500);
		return false;
	});
});

SCRIPT;

and add to footer.php first line (<?php before ) below

<p id="page-top" style="position:fixed;left:3px;bottom:0"><a href="#"><img src="https://tenman.info/labo/snip/wp-content/themes/raindrops/images/previous.png" style="-webkit-transform:rotate( 90deg );-moz-transform:rotate( 90deg );-ms-transform:rotate( 90deg );transform:rotate( 90deg );" alt="page top link" /></a></p>

It maybe shows link to top link at left bottom

Hi,nobita,

1. Solid color accomplished, but my hovering color disappeared. Can I keep or add a hovering color?

2. A bit complicated, still testing-will let you know soon.

Thanks,

Ken

#top #access .menu li a:hover{
	background:#ccc;
	color:#000;
}

Thank you.

Hi, nobita,

Our Hostserver, Hostgator, is down; will check tomorrow when their server is up again.

Thanks,

Ken

Hi, nobita,

Good news! My web is up and the solid color bar and hovering color stay, working beautifully.

Will test Scroll to Top tomorrow.

Good night,

Ken

Note: adding the rules to the Child theme-right?

Hi, nobita,
Since I am only a beginner to php, after repeated readings, my understanding of your instructions is to add the revised php paragraph, as cited below, at the end of the parent Functions.php, rather than creating a php function in the existing child theme. Please advise. I tried to shade the following code, using Microsoft Word. Hopefully, it shows up correctly. Many thanks, Ken

[Unnecessary code redacted]

I tried to shade the following code, using Microsoft Word

You must not use Microsoft Word.

Please see

https://codex.www.ads-software.com/Editing_Files

Hi, nobita,

Sorry for my ignorance. Here is the HTML for the php. Please advise. Thanks, Ken
[Unnecessary code redacted]

Nobita, Another try for HTML as follows. Ken

?[Unnecessary code redacted]

?

Hi, nobita,

One more attempt as follws. Ken
[Unnecessary code redacted]

[Unnecessary code redacted]

[Unnecessary code redacted]

Hi, nobita,

One more attempt as follws. Ken
[Unnecessary code redacted]

<?php
/**
 * Menu fixed
 *
 *
 *
 */
	define('NOBITA_QUERY', 'nobita_fixed_menu' );

	define('NOBITA_VALUE_TYPE', 'js');  //????css

	$nobita_external_link_value =<<<SCRIPT

jQuery(function() {
	var topBtn = jQuery("#page-top");
	topBtn.hide();

	jQuery(window).scroll(function () {

		if (jQuery(this).scrollTop() > 100) {

			topBtn.fadeIn();

			jQuery('#access').css({'position':'fixed','top':'0','z-index':'999','margin':'0'});
			jQuery('.logged-in #access').css({'position':'fixed','top':'29px','z-index':'999','margin':'0'});
		} else {

			topBtn.fadeOut();

			jQuery('#access').css({'position':'static'});
			jQuery('.logged-in #access').css({'position':'static'});
		}

	});

	topBtn.click(function () {
		jQuery("body,html").animate({
		scrollTop: 0}, 500);
		return false;
	});
});
SCRIPT;

	add_action( 'after_setup_theme', 'nobita_setup_theme' );

	function nobita_setup_theme(){

		add_filter('query_vars','nobita_extend_query');
		add_action( 'wp_enqueue_scripts', 'nobita_add_style_link', 99 );
		add_action( 'template_redirect', 'nobita_external_link_value' );

	}	

	function nobita_extend_query( $vars ) {

		$vars[] = NOBITA_QUERY;
		return $vars;
	}

	function nobita_add_style_link() {
		if( NOBITA_VALUE_TYPE == 'css' ){
			wp_register_style( 'nobita-extend-style', sprintf('/?%1$s=1', NOBITA_QUERY ) );
			wp_enqueue_style( 'nobita-extend-style' );
		} elseif ( NOBITA_VALUE_TYPE == 'js' ) {
			wp_register_script( 'nobita-extend-script', sprintf('/?%1$s=1', NOBITA_QUERY ) );
			wp_enqueue_script( 'nobita-extend-script' );
		}
	}

	function nobita_external_link_value(  ) {

		global $nobita_external_link_value;

		if( intval( get_query_var( NOBITA_QUERY ) ) == 1 ) {		

			$mime_type = wp_get_mime_types( NOBITA_VALUE_TYPE );

			if ( ! headers_sent( ) ) {

				header( 'Content-type: '.$mime_type );
			}

		// add value check

		if( NOBITA_VALUE_TYPE == 'css' ){ 

			$nobita_external_link_value = strip_tags( $nobita_external_link_value );
		} elseif ( NOBITA_VALUE_TYPE == 'js' ) {

			$nobita_external_link_value = strip_tags( $nobita_external_link_value );
		}
			echo $nobita_external_link_value;

			exit;
		}
	}
?>

@wccesq, why have you posted that code multiple times in different posts? Is the code different each time?