-
AuthorPosts
-
October 9, 2015 at 7:01 pm #516633
Hi
I have set the header to show logo left and main menu underneath.
I would like to add text to the right side of the header opposite the logo and also move the main menu to sit at the right hand side of page, but I can’t work out how to do this.Can someone help please.
Thanks in advance.
Keith
October 11, 2015 at 11:00 am #516918Hi,
Can you post the link to your website please?
Also check:
http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/Regards,
JosueOctober 13, 2015 at 1:48 pm #518077Hi Josue
sorry for the delay, I thought I had done this already.
October 14, 2015 at 12:21 pm #518605Hey!
follow the instructions of the link Josue provided to you: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ ad let us know when you have implemented everything and still need help.
Cheers!
AndyOctober 28, 2015 at 12:18 pm #526036Hi Andy
I have had 4 issues with the Header area, 2 of which I can’t solve.
The remaining 2 are:-
1. that I want the menu to stretch across the page and then when the page size is reduced, for the right hand side of the menu NOT to drop down to below the rest of the menu.
2. Stop the numbers on the right side of the header from disappearing behind the logo when the page size is reduced.
Thanks in advance.- This reply was modified 8 years, 5 months ago by keithm13.
October 28, 2015 at 2:43 pm #526111Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1170px) and (min-width: 990px) { #header_main_alternate .container { padding: 0; } #top .av_seperator_big_border#header .av-main-nav > li > a { padding: 0 8px; }} #header .widget { z-index: 99; }
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Your logo and text on the header is so big so they do not fit. You can use following code to hide your text on mobile
@media only screen and (max-width: 1024px) { #header .widget { display: none; }}
Best regards,
YigitOctober 28, 2015 at 3:09 pm #526149Hi Yigit
Thank you, that has solved no 2, but not no 1 re the menu
Here’s what I now have in the quick css box
#header .widget {
right: 0;
padding-top: 10px;
position: absolute;
top: 0;
transform: translate(-5%);
}@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.logo img, .logo a {
width: 152px;
max-width: 152px;
min-width: 152px;
height: 80px;
min-height: 80px;
max-height: 80px;
}
}@media only screen and (max-width: 1170px) and (min-width: 990px) {
#header_main_alternate .container {
padding: 0;
}
#top .av_seperator_big_border#header .av-main-nav > li > a {
padding: 0 8px;
}}
#header .widget {
z-index: 99;
}@media only screen and (max-width: 1024px) {
#header .widget {
display: none;
}}Thanks again.
Keith
October 29, 2015 at 12:08 pm #526689Hi!
you can control when mobile menu will appear by using this code:
@media only screen and (min-width: 1024px) { a#advanced_menu_toggle { display: block; } nav.main_menu { display: none; }}
Adjust the “min-width” value of the media query as needed.
Cheers!
AndyOctober 29, 2015 at 12:25 pm #526700Hi Andy
Thanks for your help.
Is there no way to get the menu to reduce in size without wrapping (so the view stays the same on tablets), before finally toggling to mobile menu?
Thanks in advance.Keith
October 29, 2015 at 2:25 pm #526763Hey!
you could try this code:
li#menu-item-213 { margin-right: -25px !important; }
and adjust as needed.
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.