Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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

    #516918

    Hi,

    Can you post the link to your website please?

    Also check:
    http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Regards,
    Josue

    #518077

    Hi Josue

    sorry for the delay, I thought I had done this already.

    #518605

    Hey!

    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!
    Andy

    #526036

    Hi 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.
    #526111

    Hey!

    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,
    Yigit

    #526149

    Hi 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

    #526689

    Hi!

    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!
    Andy

    #526700

    Hi 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

    #526763

    Hey!

    you could try this code:

    li#menu-item-213 {
    margin-right: -25px !important;
    }
    

    and adjust as needed.

    Best regards,
    Andy

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.