Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 17, 2016 at 1:04 am #699732
    aussiedropbear

    Hi,

    I was wondering if it were possible to create a similar header layout with logo and and other images / call to actions and a menu like the one in the website link I have provided?

    Update: Having completed a little more research I would imagine that the header may be accomplished by using widgets. However how can I break the widgets into columns that fit across in this area?

    Cheers
    John

    October 18, 2016 at 3:28 pm #700689
    Yigit

    Hey John,

    You can refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add widget area to your header. Then you can add your content into your widget area and post screenshots and show the changes you would like to make with a link to your website. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    October 20, 2016 at 9:52 pm #702100
    aussiedropbear

    HI Yigit,

    Yes I Have tried that but I end up stacking the thee elements on top of each other.

    I have created a dummy image and added a link for you to view to show how I would like the header if possible?

    cheers
    John

    October 24, 2016 at 5:59 am #703110
    Ismael

    Hi,

    In the widget, you can use the column shortcodes. Example:

    [av_one_half first]FB HERE[/av_one_half]

[av_one_half]PHONE INFO HERE[/av_one_half]

    You can generate these shortcodes from the “Insert Theme Shortcode” button aka the “shortcode wand”.

    Best regards,
    Ismael

    October 24, 2016 at 9:06 pm #703432
    aussiedropbear

    Thanks Ismael. I’ll give that a shot.

    Cheers
    John

    October 24, 2016 at 9:50 pm #703449
    aussiedropbear

    Hi Ismael,

    Please image links for reference.

    I have added the code and am using just one dynamic_sidebar( ‘header’ ) in the functions.php file. Maybe I should add three and if I do what would I need for the CSS?

    I have problems trying to get the main company logo to a sufficiently larger size in normal desktop view and then having the other elements behave in mobile view. Presently they just stack on one another over the other content?

    Cheers
    john

    PS: Would be great to see this sort of layout included in the admin panel in the future.

    October 27, 2016 at 7:51 am #704696
    Ismael

    Hi,

    Thank you for the update. Is the site live? Did you add the logo manually? I think it’s better if you use the default logo and then add the other elements in the widget. Please post the site url so that we can inspect the element.

    Best regards,
    Ismael

    October 28, 2016 at 12:55 am #705084
    aussiedropbear

    Hi Ismael,

    Apologies for the late reply.

    The site is not live but I have added an admin user account so you can view.

    I have now a changed it so that the default logo is used. the other elements are not aligning and/or resizing correctly. Also, I will need them to stack on one another and resize if possible to the mobile view if possible?

    Cheers
    John

    November 1, 2016 at 5:55 am #706547
    Ismael

    Hi,

    We moved the images inside a single widget and then adjust the column shortcode. Please adjust the style of the elements in the Quick CSS field.

    Best regards,
    Ismael

    November 4, 2016 at 12:14 am #707994
    aussiedropbear

    Hi Ismael,

    Many thanks for this. I’m not much good on the CSS so do you have anyone that you can recommend that I could approach to style this for me?
    Cheers
    John

    November 6, 2016 at 11:05 pm #708975
    aussiedropbear

    Hi Ismael,

    I have enlarged one of the images and believe I have the correct sizing of those in the header now.

    My only problem is two things that I need some assistance with:

    1. In a mobile view, the images are over the main content and not properly formatting with the header in this view (see image)
    2. How do I space those elements so that there is padding to the right side and between each other element to get a balanced view of them in the header?

    Cheers
    John

    November 7, 2016 at 8:39 am #709066
    Ismael

    Hi,

    How do you want to format the images on mobile view? There’s not enough space for the images inside the header so one workaround is to hide it on mobile and then add them in the page using the advance layout builder. Use css media queries to toggle their display property.

    // http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    You have to add these images on every page so the Template feature of the builder will be useful.

    Best regards,
    Ismael

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