Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Joyn › Change header height
New Landing › How can we help? › Themeforest Theme Support › Joyn › Change header height
- This topic has 7 replies, 4 voices, and was last updated 9 years by Kyle – SUPPORT.
-
Posted in: Joyn
-
February 18, 2015 at 3:02 pm #151282
I want to change the height of the normal header (I think it’s 99px, to 89px) and the floating header (79px to 69px). Anyway so just -10px for both normal and floating header. What is the best way to go about doing this?
So far I’ve added in custom CSS:
.full-center #header, .full-center .float-menu { height:89px !important; } .full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center .header-right div.text, .full-center #header .aux-item ul.social-icons li { height:89px !important; line-height:89px !important; } .browser-ff #logo a { height:89px !important; }
This brings me fairly close to the desired result, however it does not fix the floating header height, and my logo is not adjusting properly when the floating menu activates. See http://www.cindori.org.
How can this be achieved in the best way, and is there anything missing from my code above/will it break stuff?PS. Super satisfied with the theme overall and it’s vast customisation features. Best quality WP themes out there.
February 19, 2015 at 8:18 am #151475Hi,
I have tested and found each things perfectly. Header and logo looks perfect after scrolling the page. Thanks for liking the theme.
Thanks
MohammadFebruary 19, 2015 at 10:05 am #151493Hi Mohammad
Well, no it is not working fully.1. The floating menu is not smaller than the static menu, they are the same size. I want to decrease the height of the floating menu. What CSS property will achieve this?
2. The logo is not adjusting properly (vertically centered) when scrolling and activating the floating menu:February 19, 2015 at 10:32 am #151499Hi,
Logo alignment perfect as i checked many times. Please go through Admin -> Theme Options -> Header Options -> Sticky header resizing [ Enable the sticky header to resize when scrolling down the page].
Thanks
MohammadFebruary 19, 2015 at 11:25 am #151531I got it working. For reference, the CSS needed to change header height was:
.full-center #header, .full-center .float-menu { height:89px !important; } .full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center .header-right div.text, .full-center #header .aux-item ul.social-icons li { height:89px !important; line-height:89px !important; } .full-center.resized-header #main-navigation ul.menu > li > a, .full-center.resized-header .header-right ul.menu > li > a, .full-center.resized-header nav.float-alt-menu ul.menu > li > a, .full-center.resized-header .header-right div.text, .full-center.resized-header #header .aux-item ul.social-icons li { height:59px !important; line-height:59px !important; } .full-center.resized-header #header, .full-center.resized-header .float-menu { height:59px !important; }
Where 89px and 59px is the new height for static and floating header.
February 19, 2015 at 1:36 pm #151606Ok great ๐
March 12, 2015 at 11:07 am #156813Thanks Cindori, I was just looking for this exact thing and you saved me a bunch of time!
March 12, 2015 at 11:11 am #156815Great ๐
-
Posted in: Joyn
You must be logged in and have valid license to reply to this topic.