-
Search Results
-
[Resolved]
Topic: News Pro – How to get a simple responsive header – No image – No widget
Hi
I am using New Pro and want a simple responsive header
- I don't want to use a image/logo (520 x 180 pixels is image size for the header)
- I don't want to use the widget (header right widget)If i don't upload the image and don't activate the widget, I get the site title BUT it is not responsive - does not look good on a mobile (see link below):
How do i fix this ?
Also is it possible to change the font size /style for just the header ?I have looked at a possible solution of having a "Full Width Header Image" as described by Brad Dalton but would prefer a simple stylized text as header.
https://wpsites.net/web-design/news-pro-full-container-width-header-image/
Would really appreciate any help I can get.
Mark
[Resolved]Topic: Cafe Pro Logo in Header
Hi!
I'm new to StudioPress & the Genesis framework, but after some research, it really seemed like the way to go. I have my FIRST ever web design client, and I've run into a problem.
I thought the black box at the top of Cafe Pro was an image & could be replaced with my client's logo. Now that I have the theme, I see that it's just a box with the heading & tag line text in it.
Is there any hope of me replacing this with a logo image?
Thanks!
Brad
Is it possible to replace the entire header area on the modern studio theme (i.e. the navigation on left and right and the logo in between) and replace with text?
Hello,
My apologies if this double posts as I was trying to correct a couple things in the original and now it no longer appears on my end (nor does it show a topic started on my profile).
I am currently creating a Child Theme using Child Theme Configurator and their other plugin for Responsive menu. The Responsive Menu works great and triggers on 767px width or smaller. Naturally I was looking for a Sticky Header for larger screens as well. But to be slightly compressed compared to the existing header (and not a hamburger like mobile).I came across the following code which worked great but would appear behind the responsive menu for mobile devices..
JS:
<script src="https://gist.github.com/anonymous/c5c8949eade6678c4227a6faceb7ef2b.js"></script>
CSS:
[css].agct_sticky {
background-position: left;
text-align: right;
background-image: url(images/cropped-logo.png);
background-repeat: no-repeat;
display: none;
position: fixed;
top: 0;
border-bottom: 1px solid #2489f5;
background-color: #000;
left: 0;
right: 0;
}[/css]
Functions:
[php]//Sticky Header Desktop
add_action('genesis_after_footer','agct_sticky_menu');function agct_sticky_menu(){
wp_nav_menu( array(
'container' => 'div',
'container_class' => 'agct_sticky nav-primary',
'menu_class' => 'genesis-nav-menu',
'theme_location' => 'primary'
) );
}//Call To js
add_action( 'wp_enqueue_scripts', 'agct_sticky_load_scripts' );function agct_sticky_load_scripts(){
wp_enqueue_script('sticky_menu', get_stylesheet_directory_uri() . '/js/sticky.js', array( 'jquery' ),'1.0.0',true);}[/php]
After some testing, I was able to add the following to the JS to have the Sticky Header only appear on 768px or larger:
if ( $(window).width() > 768) { //hide on size less than 768
Now the JS appears as:
<script src="https://gist.github.com/anonymous/b843775ed476adb43efd345be88918b9.js"></script>Finally works and appears properly.
- Except
, it won't disappear. Now when scrolling back to the top of the page the Sticky Header remains at the top and will overlap the existing header... I feel there is something I may be missing or not properly adjusted. Any help would be greatly appreciated, thanks in advance!
Hello,
I have been working on an issue with using a Sticky Header. I am using the base Genesis Framework (2.5.3) and building a Child Theme with Child Theme Configurator. I am also using their Responsive Menu plugin. The responsive menu works great on mobile devices and only appears at 767px width or smaller as it's supposed to. So naturally I wanted a Sticky Header to appear on larger screens as well but smaller than the existing header upon scroll. I came across the code below which worked great but would appear behind the responsive menu on mobile devices...
CSS: `.agct_sticky {
background-position: left;
text-align: right;
background-image: url(images/cropped-logo.png);
background-repeat: no-repeat;
display: none;
position: fixed;
top: 0;
border-bottom: 1px solid #2489f5;
background-color: #000;
left: 0;
right: 0;
}`
JS: `jQuery(function($){var $mainMenu = $('nav.nav-primary'),
$stickyMenu = $('.agct_sticky');$(window).on('scroll', function() {
var windowTop = $(this).scrollTop(); //get top of window
var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height(); //bottom of main menu
if( windowTop >= mainMenuBottom ) { //main Menu is no longer showing
$stickyMenu.slideDown(); //show our sticky menu
} else {
$stickyMenu.slideUp(); //hide our sticky menu
}
});});`
Functions: `//Sticky Header Desktop
add_action('genesis_after_footer','agct_sticky_menu');function agct_sticky_menu(){
wp_nav_menu( array(
'container' => 'div',
'container_class' => 'agct_sticky nav-primary',
'menu_class' => 'genesis-nav-menu',
'theme_location' => 'primary'
) );
}//Call To js
add_action( 'wp_enqueue_scripts', 'agct_sticky_load_scripts' );function agct_sticky_load_scripts(){
wp_enqueue_script('sticky_menu', get_stylesheet_directory_uri() . '/js/sticky.js', array( 'jquery' ),'1.0.0',true);}`
Added the following line to JS:
if ( $(window).width() > 768) { //hide on size less than 768
Now the JS is:jQuery(function($){ var $mainMenu = $('nav.nav-primary'), $stickyMenu = $('.agct_sticky'); $(window).on('scroll', function() { var windowTop = $(this).scrollTop(); //get top of window var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height(); //bottom of main menu if( windowTop >= mainMenuBottom ); //main Menu is no longer showing if ( $(window).width() > 768) { //hide on size less than 768 $stickyMenu.slideDown(); //show our sticky menu } else { $stickyMenu.slideUp(); //hide our sticky menu } }); });
Now it only appears on screens 768px width or larger. Fantastic!
-
But it won't disappear....
Upon scrolling to the top of the page, the compressed sticky header is still there and it overlaps the existing Header/Menu at the top of the page. I feel like I am missing something or there is a simple adjustment that needs to be made and I'm not seeing it. Any assistance would be greatly appreciated, thanks in advance!
[Resolved]Topic: Image logo cut off in Showcase Pro
Hello,
I was hoping for some help with my image logo. I'd prefer a larger image logo than the standard 200px. I modified the functions.php file as follows so I can upload a 400px x 100px logo.
// Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 400,
'height' => 150,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );I was able to upload the correct image size but it's cut off when viewing on the site. I can't seem to find the correct combination of CSS edits to resolve this. Any thoughts?
Topic: Foodie Pro Header Issues
Hiya, I have been struggling with the Foodie Pro header part. Basically what I want is to have it CENTERED and the size as it is at the moment which is 600 x 250. For some reason, whatever I do, I cannot get it fixed.
The following is from functions.php
//* Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 600,
'height' => 250,
'header-selector' => '.site-title a',
'header-text' => false,The following is from the CSS:
Site Header
----------------------------------------------------------------------------- */.site-header {
background-position: center;
padding: 20px 0;
}.site-header .wrap {
padding: 17px 0;
}/* Title Area
--------------------------------------------- */.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
width: 600px;
}.header-image .site-description {
line-height: 0;
}.header-image .title-area {
margin: 0 auto;
max-width: 600px;
padding: 0;
}.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}.site-title a {
color: #010101;
font-style: normal;
}.site-title a:hover,
.site-title a:focus {
color: #010101;
}.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
width: 100%;
}.header-image .site-description,
/* Logo, hide text */
.header-image .site-title > a {
-webkit-background-size: contain !important;
background-size: contain !important;
display: block;
height: 250px;
margin: 10px auto;
max-width: 600px;
text-indent: -9999px;
}.header-image .site-header {
background-position: center !important;
background-size: 600px 250px !important;
}.header-image .site-title a {
float: none;
min-height: 250px;
min-width: 600px;
}I would really appreciate if someone can help. Thanks a bunch
Regards
Funda
[Resolved]Topic: Showcase Pro Site Title Issue on Featured Images
Hi, i am using Genesis Sample theme.
My custom Image Logo size is 250*50
I have this value in style sheet..header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
float: left;
min-height: 50px;
width: 100%;
}And this value in functions.php
// Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 250,
'height' => 50,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );Please help me to show full image 250*50px.
Welcome!
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.