WordpressTheme Simplicity title position fixed
How do I make an wordpresstheme simplicity title position fixed?
What is a wordpresstheme simplicity title position fixed? How do you make a wordpresstheme simplicity title position fixed? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.
WordpressTheme Simplicity title position fixed Previews
WordpressTheme Simplicity title position fixed - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WordpressTheme Simplicity title position fixed</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="header" class="clearfix"> <div id="header-in"> <div id="h-top"> <!-- モバイルメニュー表示用のボタン --> <div id="mobile-menu"> <a id="mobile-menu-toggle" href="#"><i class="fa fa-list fa-2x"></i></a> </div> <div class="alignleft"> <!-- サイトのタイトル --> <p id="site-title"> <a href="http://localhost/blog/">blazechariot</a></p> <!-- サイトの概要 --> <p id="site-description"> Just another WordPress site</p> </div> <div class="alignright"> <!-- SNSページ --> <div class="sns-pages"> <p class="sns-follow-msg">ko-hidekichi</p> <ul class="snsp"> <li class="twitter-page"><a href="//twitter.com/ko-hidekichi" target="_blank" title="Twitterをフォロー" rel="nofollow"><span class="fa fa-twitter-square"></span></a></li> <li class="google-plus-page"><a href="//plus.google.com/12345678901" target="_blank" title="Google＋をフォロー" rel="nofollow publisher"><span class="fa fa-google-plus-square"></span></a></li> <li class="feedly-page"><a href="//feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Flocalhost%2Fblog%2F%3Ffeed%3Drss2" target="blank" title="feedlyで更新情報をフォロー" rel="nofollow"><span class="icon-feedly-square"></span></a></li> <li class="rss-page"><a href="http://localhost/blog/?feed=rss2" target="_blank" title="RSSで更新情報をフォロー" rel="nofollow"><span class="fa fa-rss-square fa-2x"></span></a></li> </ul> </div> </div> </div> <!-- /#h-top --> </div> <!-- /#header-in --> <nav> <div id="navi-in"> <ul class="menu"> <li><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> </ul> </div> </nav> </div> <div id="body"> <div id="body-in"> <div id="main"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum fringilla dui, non tristique neque congue id. Phasellus scelerisque eros eu ornare convallis. Etiam sed risus turpis. Aliquam erat volutpat. Nunc vel leo dictum, vestibulum velit nec, tincidunt nulla. Vivamus consequat lacus eget sem ultrices commodo. Aenean mattis leo at consectetur semper. Quisque sed hendrerit diam, vitae varius libero. Etiam suscipit tellus non nunc gravida, at scelerisque metus cursus. Nulla viverra viverra enim at lobortis. Vestibulum euismod elementum sem in consectetur. Nam varius massa ac tortor ultrices, in pharetra diam fringilla.</p>
<p>Donec id nisi vel ligula sollicitudin tristique. Suspendisse eu risus vitae libero egestas mollis et sed ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel rutrum mauris, in lobortis nunc. Sed viverra in ante sit amet aliquet. Pellentesque euismod diam eget ipsum tempus semper. Phasellus molestie libero risus, vel vehicula risus efficitur at. Cras maximus commodo volutpat. Vestibulum ullamcorper turpis augue, quis sollicitudin nulla dignissim in.</p>
<p>Phasellus iaculis sapien feugiat, interdum est ac, lobortis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultrices ut dolor ac sagittis. Phasellus vitae nisi augue. Nunc in pharetra ante, eget rutrum ipsum. Integer suscipit ante ac mauris sagittis posuere. Donec maximus quis tortor ut tristique. Suspendisse lacinia erat nisl, quis egestas est imperdiet ac. Fusce et egestas sapien. Sed rhoncus est ipsum, eu eleifend libero ornare quis. Praesent fringilla neque sit amet nisi aliquam fermentum. Pellentesque ornare ac nulla at feugiat. Nullam placerat purus non massa mollis vestibulum.</p>
<p>Proin a rutrum justo. Etiam et urna ultricies, accumsan odio quis, condimentum purus. Aenean ut lorem nisi. Nullam convallis ligula eget augue eleifend, eu molestie leo bibendum. Duis rhoncus tristique purus, a suscipit enim egestas ut. Morbi finibus tincidunt leo non gravida. Proin suscipit malesuada diam nec laoreet. Aenean tristique lobortis nibh, id ultricies ligula facilisis et.</p>
<p>Mauris pharetra sapien at sem sodales sagittis. Praesent imperdiet ante et neque mattis luctus. Maecenas urna metus, posuere non tempor rutrum, gravida eget arcu. Donec vehicula mi nunc, non vestibulum ex ornare nec. Phasellus lacinia tellus fermentum, vehicula libero vel, aliquam orci. Maecenas nec odio posuere nunc rhoncus commodo at ut nulla. Mauris ac elementum mauris. Quisque ornare purus lobortis nunc gravida, nec iaculis leo vestibulum.</p></div> <div id="sidebar">SIDE BAR <div id="sidebar-widget"> <!-- ウイジェット --> <div id="search-2" class="widget widget_search"> <form method="get" id="searchform" action="http://localhost/blog/"> <input type="text" placeholder="ブログ内を検索" name="s" id="s"> <input type="submit" id="searchsubmit" value=""> </form> </div> </div> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
WordpressTheme Simplicity title position fixed - Script Codes CSS Codes
#container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap;
}
#header { position: relative;
}
#header #header-in #h-top { background-color: rgba(22, 54, 71, 0.9); min-height: 50px; position: relative; top: 0; left: 0; width: 100%; -webkit-transition: .3s ease; transition: .3s ease;
}
#header #header-in #h-top.fixed { position: fixed; opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0);
}
#header #header-in #h-top.fixed.show { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
#header #header-in #h-top .newHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px;
}
#header #header-in #h-top .newHeader .title-wrapper { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; position: relative;
}
#header #header-in #h-top .newHeader .title-wrapper #site-title, #header #header-in #h-top .newHeader .title-wrapper #site-description, #header #header-in #h-top .newHeader .title-wrapper #site-title a { margin: 0; padding: 0; display: block; color: #fff;
}
#header #header-in #h-top .newHeader .title-wrapper #site-title, #header #header-in #h-top .newHeader .title-wrapper #site-descripttion { font-family: Helvetica, sans-serif;
}
#header #header-in #h-top .newHeader .title-wrapper #site-title { font-size: 30px; font-size: 1.875rem; font-weight: 800; line-height: 1; display: block;
}
#header #header-in #h-top .newHeader .title-wrapper #site-description { font-size: 12px; font-size: 0.75rem; line-height: 1;
}
#header #header-in #h-top .newHeader .title-wrapper a { text-decoration: none;
}
#header #header-in #h-top .newHeader .sns-pages { margin-left: auto; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;
}
#header #header-in #h-top .newHeader .sns-pages .sns-follow-msg { display: none;
}
#header #header-in #h-top .newHeader .sns-pages ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0; padding: 0;
}
#header #header-in #h-top .newHeader .sns-pages ul li { list-style: none; margin-right: 5px;
}
#header #header-in #h-top .newHeader .sns-pages ul li:last-child { margin-right: 0;
}
#header #header-in #h-top .newHeader .sns-pages ul li a { text-decoration: none; color: #eee;
}
#header #header-in #h-top .newHeader .sns-pages ul li a span { display: block; font-size: 32px; font-size: 2rem;
}
#header #header-in #h-top .newHeader .widget_search { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
}
#header #header-in #h-top .newHeader .widget_search form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; position: relative;
}
#header #header-in #h-top .newHeader .widget_search form #s { border: none; border-radius: 5px 0 0 5px; padding: 4px 10px; margin: 0; width: 10rem;
}
#header #header-in #h-top .newHeader .widget_search form #searchsubmit { padding: 4px; margin: 0; background: #f33; border-radius: 0 5px 5px 0; border: none; color: #fff;
}
#header #header-in #h-top .newHeader .menu { -webkit-box-ordinal-group: 1000; -ms-flex-order: 999; order: 999; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin: 0; padding: 0;
}
#header #header-in #h-top .newHeader .menu li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; list-style: none;
}
#header #header-in #h-top .newHeader .menu li a { text-decoration: none; color: #fff;
}
nav a { text-decoration: none;
}
nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0; padding: 0;
}
nav ul li { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; list-style: none;
}
/*#h-top.fixed {*/
#h-top #site-title, #h-top #site-description { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0);
}
#h-top #site-title.moveRight, #h-top #site-description.moveRight { opacity: 1; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
nav.fixed { position: fixed; width: 100%; padding: 4px; background-color: rgba(8, 24, 32, 0.9); left: 0;
}
nav.fixed a { color: #fff;
}
#body { margin-top: 50px;
}
#body #body-in { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto;
}
#body #body-in #main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 100%; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; padding: 20px;
}
@media screen and (min-width: 320px) and (max-width: 767px) { #body #body-in #main { margin-right: 0; -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; }
}
#body #body-in #sidebar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 300px; background: #fff;
}
@media screen and (min-width: 320px) and (max-width: 767px) { #body #body-in #sidebar { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; max-width: 100%; }
}
#header-in, #body-in, #navi-in { max-width: 1024px; margin: 0 auto;
}
@media screen and (min-width: 320px) and (max-width: 767px) { #header-in, #body-in, #navi-in { max-width: 100%; }
}
WordpressTheme Simplicity title position fixed - Script Codes JS Codes
(function($) { $(function() { /* Keep making .newHeader to the top of the # h-top */ $("#h-top").prepend("<div class='newHeader' />"); /* Definition of the selector to be moved */ var moveSelector = "#site-title, #site-description, #sidebar .widget_search, #h-top .sns-pages, #mobile-menu"; $(moveSelector).appendTo("#h-top .newHeader"); /* Wrap by .newHeader the title and description */ $("#site-title, #site-description").wrapAll("<div class='title-wrapper'></div>"); /* the value of the submit button to "検索(:search)" */ $("#searchsubmit").val("検索"); /* Hide mobile button when the screen size is equal to or higher than 440px */ if (window.innerWidth > 440) { $("#mobile-menu").hide(); } else { $("#mobile-menu").show(); } /* After completion of the movement of the selector, animate the title */ titleAnimationShow(); /* scroll to header fixed */
var flag = false;
$(window).scroll(function() { var st = $(window).scrollTop(); var titles = $("#site-title, #site-description"); var h_top = $("#h-top"); var headerPosition = $("#main").offset();
if (st > headerPosition.top || st > 0) { h_top.addClass("fixed");
} else { h_top.removeClass("fixed"); /* Return the .menu to #navi-in */ $("#h-top .newHeader .menu").appendTo("#navi-in");
} /* when the #h-top has a .fixed */ if (h_top.hasClass("fixed")) { $("#h-top.fixed").addClass("show"); $("nav .menu").appendTo("#h-top .newHeader"); if (titles.hasClass("moveRight")) { if (!flag) { titles.removeClass("moveRight"); } titleAnimationShow(); flag = true; } } else { titles.removeClass("moveRight"); flag = false; }
}); });
})(jQuery);
function titleAnimationShow() { $("#site-title") .delay(300) .queue(function(right) { $("#site-title").addClass("moveRight"); right(); }); $("#site-description") .delay(600) .queue(function(dright) { $(this).addClass("moveRight"); dright(); }); //$("#site-title").dequeue("right"); //$("#site-description").dequeue("dRight"); //$("#site-title, #site-description").removeClass("moveRight");
}
| Developer | Hidekichi |
| Username | Hidekichi |
| Uploaded | July 10, 2022 |
| Rating | 3 |
| Size | 6,861 Kb |
| Views | 64,768 |
Do you need developer help for WordpressTheme Simplicity title position fixed?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hidekichi (Hidekichi) Script Codes
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Pure CSS Menu | Bronsrobin | 3,321 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| React TODO | Enieste | 3,320 Kb |
| Animated skewed panes | NyX | 4,462 Kb |
| Easing | GreenSock | 2,043 Kb |
| Nice responsive team page | Infomiho | 3,139 Kb |
| Twinner Spinner II | Katydecorah | 2,974 Kb |
| Twitch.tv API | Ryzokuken | 2,618 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
| Nice textured background | Hans | 2,659 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!