-
Posts
-
Thanks for the great theme. I have created a child theme and have a fair bit of tweaks for my employer.
1) We needed to have the social icons and header displayed and static on the screen, and also need to disable the shrinking effect of the header when scrolling.
As “Fixed menu” header is the only option providing all the basics of what we needed, I had to do the following customization:
/* fix the height of the header block and lock it down */
#header_main .container {
height: 82px !important;
line-height: 82px !important;
}
/* remove the padding from the main content to the bottom of the header */
.fixed_header.social_header #main {
padding-top: 82px;
}Now that the header block and header-meta block is where we want it and sized correctly, the menu items are still scrolling. How do I fix its position?
2) We noticed that the text colour for the contact info and social icons is too light on the light coloured background, but haven’t been able to find the relevant code in the CSS to make the edit.
3) The request was to put the icons to the right, above the menu, and placed the contact number just to the left of the icons using the following code:
/* put the icons on the right */
#top .social_bookmarks li {
float: right;
}
/* move the contact # left of the icons */
.sub_menu {
right: 70px;
}Is there a better way to do this?
Due to confidentiality clauses with my employer, I cannot disclose the URL out in public during testing, however, I can provide this privately if necessary for you to look at my code.
In relation to the above, I have uploaded the following screen shots.
which shows a portion of the fixed header on my screen (info not-for-public-at-this-moment has been blurred)
When scrolling down, it looks like:
In another page on the site, the menu indicator looks like:
We’re ready to go live, but these little tweaks would be nice to resolve sooner than later.
First sorry for the late reply.
1) Insert following code into the quick css field
.fixed_header #header {
position: relative;
}2) Use following code
#top .social_bookmarks li a {
color: #333;
}
.social_header .phone-info span {
color: #333;
}
.social_header #top .sub_menu>ul>li a {
color: #333;
}3) Yes – the code seems to be ok. the “float” attribute won’t break the responsive design.
Thanks for that, unfortunately, no, it didn’t work, the code tweak to “position: relative” made the header non-sticky. They need the header bar to be static, but when scrolling the main menu text starts moving upwards. I need to lock the menu to the header.
I tried changing the header to “non-fixed with social”, then apply the following code:
#header {
position: fixed;
margin-top: -115px;
}then tweak the main content block to push it down by 115px.
/* remove the padding from the main content to the bottom of the header (not needed with fixed header)*/
.fixed_header.social_header #main {
/* padding-top: 115px; */
}This had the desired effect, and the menu items actually sat where we wanted them towards the bottom (not middle) of the header bar, and stayed static (and sticky on screen) when the page scrolled. However, this had the side-effect of breaking when changing screen resolutions.
As for 3) – I found the theme styling setting for it and hard coded the colour in the child style.css.
In relation to the moving menu, I’m hoping it’s a simple CSS override as I’m hoping to not need to mess with the JS or PHP in the backend in case there’s a theme update that breaks any customisation, and as a newbie, if it comes to that, I’m hoping someone just points me in the right direction.
Just advising that I’ve solved the issue with the following tweaks.
I was able to identify the elements that needed tweaking:
1) Header block with logo and social/contact info above is now static and “sticky” by choosing Fixed heading in the theme settings. Following code was to fix.
#header {
position: fixed;
}
/* fix the height of the header block and lock it down */
#header_main .container {
height: 82px !important;
line-height: 82px !important;
}2) Text colour was thru theme settings, but had to apply the following changes:
/* Social Icons & Contact
*/
/* put the icons on the right */
#top .social_bookmarks li {
float: right;
}
/* move the contact # left of the icons */
.sub_menu {
right: 70px;
}
.social_header .phone-info {
color: #5f5e5e!important;
font-size:1.2em;
font-weight:normal;
}Thanks to the tips on the Avia Menu at https://kriesi.at/support/topic/avia-menu-repositioning#post-124971 I was able to place the menu block exactly where I wanted it, aligned to the bottom of the header block in line with the baseline of the logo. A few tweaks were needed to move the menu indicator as well through the .avia-menu-fx tag.
/* Main menu position
*/
.main_menu {
height:25px;
top:55px;
}
.main_menu ul li a {
height: auto !important;
line-height: 20px !important;
}
.main_menu ul:first-child > li > a {
padding:0 7px;
}
.main_menu .menu ul {
margin-top:8px;
}
.avia-menu-fx {
bottom: -8px;
}Edit – screen shot of the result after the above tweaks.
- The topic ‘Heading and menu modifications’ is closed to new replies.