-
Search Results
-
I have used the directions at: http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/ and http://keypresswp.com/getting-your-head-around-header-images/#option6
My logo.png imported beautifully with these directions.
However! I have a border around my logo the default site color. I would like to remove that whole light blue border. Can someone tell me how to do that?
Hello,
I have added a custom logo to my header and whenever I do the text "Genesis Framework" with a subtitle of "Supports HTML5 and Mobile Responsive Design". The custom logo is laid right on top of it. I've removed all text from WP-ADMIN > SETTINGS > GENERAL > SITE TITLE and it still shows up.
Please see screenshot below for a better idea of what's happening:
Thanks for your help!
[Resolved]Topic: Mobile move logo to the left
I moved the hamburger menu to the left successfully for mobile, now I need to move the logo to the left over the menu. I have not been able to find the right css to do that.. I only need it for mobile.. responsive menu and logo to the left side for both mobile version is the goal.
What I have so far
/* Responsive Menu
——————————————— */
.responsive-menu-icon::before {
margin: 0 auto;
text-align: left;
}[Resolved]Topic: Move logo to the left – how?
Im am using Genesis Sample theme. I have used this guide to make an inline logo on mobile devices https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/
On mobile devices it works perfect, but on computer my logo is centeret instead of left aligned.
As I can see the logo is set to "float: left;" but it appears centeret on my site.
How do I fix this issue?
Thanks
However, this site looks great on my desktop computer and loses most of the backstretch image in my phone. For example, it is important that the logo is always visible so I was hoping the image would just be rescaled in its entirety so the user would get the same experience on a phone or tablet. Now it looks like I'll need some custom CSS to do this.
Anyone had experience with this or have any suggestions. Thank you in advance for your expertise!
I'm using Focus Pro for my own site.
When i uploaded my header image I resized it to be 500x180.
Header image looks fine, but when I look via a device the logo is pushing across the screen and is not responsive.I had to add custom CSS so that the 500x180 image would display in it's entirity but now it's not responsive.
I used:
.header-image .site-title a {
min-height: 180px;
min-width: 500px;
}If i try using % then it cuts the image off so I'm assuming there is a div or container which holds the header image and i need to be able to adjust that part so my image isn't cut off when using computer but is still responsive when viewing via device.
Can anyone help with this as I cannot seem to work out how to do it.
I've customised the header image to suit our logo (700x142) which is fine. I've been playing around with the CSS to make it responsive and it's working when I resize the browser window but not working on mobile devices.
I've changed the following CSS but it isn't very smooth if i change the browser window size to see if it responds and the Header Top widget area contains the Search widget which is slightly cut off
Any suggestions to improve this on a desktop and also why it's not working on a device?
.header-image
.site-title > a {
min-height: 140px;
}.title-area {
width: 75%;
}.site-header .widget-area {
width: 25%;
}Thank you in advance.
[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
I'm using the default Genesis Framework theme (https://my.studiopress.com/themes/genesis/#demo-full), and there are 3 things I'd like to change about the "hamburger" icon that replaces the navigation on smaller screens.
1. How do I change the size of the icon itself? Like if I wanted to make it slightly bigger?
2. How do I replace it with an 'X' after it has been tapped and the menu is expanded, this way the 'X' would represent closing the menu? (And then of course it would switch back to being the hamburger icon when closed.)
3. I've seen this in other StudioPress themes, but not mine, so I'm not sure how to do it. Right now the hamburger icon appears below my logo. I want it to appear on the same line as my logo... either to the left or right of it. How would this be done?
Thanks in advance for any help.
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!
I am trying to add my logo to my header in the magazine pro theme so it is always on the screen with the header. Can anyone help me make the case needed to do this? Or show me where I would need to go to do so?
I resized the logo image in my cafe pro site too. Now, it is too large for responsive display. Anyone know the CSS I would need to do that? The site is http://thenooknh.com/. Thanks,
Russ[Resolved]Topic: Make Sample Child Theme .site-header and logo and widget nav 70px high
Seems like this would be easy enough to do but every google search is about changing the header image. I know how to resize the header image. But I can't figure out how to do something as simple as shrinking the header to be a thin strip - like on apples web site - or on this very site. could someone point me to a tutorial on how to do what would seem like a common and simple change to sample child theme and have it not break the responsiveness of my site.
[Resolved]Topic: Lifestyle Pro full width responsive background image
Hi all,
i am trying to set up Lifestyle Pro theme to have in the header section a full width and responsive background image instead of the chosen color background, and on top of that my logo (don't know yet if centered or on the left, the latter should be easy enabling widget header right i think)
Any suggestion about the size of the background image and how to do that? for now i just added
background-image: url(http://myurl/to-my-image); background-size: 100% 100% !important; background-repeat: no-repeat; padding: 0px;
in the .site-header class, but my image (tried with a 1400x300 and 1200x200) seems always streched and a little deformed, and i don't know if i am making some mistake about image size or something else
Thank you!
I've searched for a way to create full-width header on Magazine Pro, but lots of different advice and nightmare crash stories. Is there a plugin to create full width responsive headers? If not, what's the best way to tweak the code to over-ride the settings? I found this...
and
https://wpsites.net/web-design/change-logo-header-image-size-in-genesis/
But neither seems exactly right for the current Magazine Pro theme, looking at the code. I've backed up both the css and php codes in Notes, but want to make sure I have the best advice before starting.
I searched the topics but didn't see answer to this -- any help is much appreciated!(My site has not launched yet, just setting up.)
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.