Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • August 24, 2020 at 6:11 am #1240261
    smarta-brett

    Hi

    I am working on this site

    Home

    the client wants a burger menu on desktop as well as phone
    I have used an Enfold menu for the Mobile version
    I have used a plug-in to create the custom burger menu you see on the left of the header

    I have used a secondary menu to create the BOOK NOW link at top right
    but Ideally I would like the header to look like this
    https://diamondbeachcabarita.com.au/wp/wp-content/uploads/2020/08/Screen-Shot-2020-08-24-at-2.05.01-pm2.png

    ie – create a button that links to the booking page
    (if possible toggle the book now button off for mobile)
    and
    move the image up closer to the logo
    I have tried using css { display: none; } for several things that I thought would move it up but so far I have had no luck

    I hope you can help me out

    August 24, 2020 at 11:28 pm #1240551
    smarta-brett

    so I have also now tried adding a book now button using some html the Header “Extra Content” which works well
    but now the “container av-logo-container” moves down, the logo shrinks and moves to the left

    when I remove the “extra content” – the logo is positioned correctly in the center and is the right size (larger)

    is theer some CSS to fix this?

    August 24, 2020 at 11:45 pm #1240552
    smarta-brett

    I’d also like to hide the book now button on mobiles

    thanks in advance !

    August 27, 2020 at 4:07 pm #1241242
    Ismael

    Hi,

    Thank you for the inquiry.

    You can use this css code to adjust the position of the phone info container where you added the booking button.

    .phone-info {
	position: absolute;
	right: 10px;
}

    To hide it on mobile view, use this css code.

    @media only screen and (max-width: 767px) {
    .phone-info {
	display: none;
    }
}

    You can also set the logo to the center by adjusting the Menu and Logo Position settings in the Header > Header Layout panel.

    Best regards,
    Ismael

    August 27, 2020 at 11:34 pm #1241321
    smarta-brett

    Hi Ismael

    unfortunately that didn’t work as well as i hoped

    menu is currently set to “Logo center, menu above”
    that seems to be the way it displays best

    this image
    https://diamondbeachcabarita.com.au/wp/wp-content/uploads/2020/08/Screen-Shot-2020-08-28-at-7.27.28-am.png
    shows the booking button not aligning with the edge of the page
    it also shows that it moved the logo up but it is still a little smaller than normal and not really in the correct position

    also the logo does not act as sticky
    when you scroll up the menu & booking button remain but the logo moves up with the page

    this image of the mobile
    https://diamondbeachcabarita.com.au/wp/wp-content/uploads/2020/08/IMG_2181CB73F70B-1.jpeg
    shows the button gone but the space is not removed and pushes the logo down the page

    August 27, 2020 at 11:55 pm #1241327
    smarta-brett

    ok – I managed to get the booking button to the right (a setting in header behaviour)
    but the logo is still a little small and down a little
    still not sticky
    and there appears to be a faint line running below a thin white space at the top (about 5 or 6mm)

    August 31, 2020 at 1:50 pm #1242180
    Ismael

    Hi,

    The site is now asking for htaccess authentication. Please post the info in the private field.

    You might want to consider adding the button as a header widget to remove the faint line above the header instead of adding it in the phone info field,

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Ismael

    August 31, 2020 at 11:08 pm #1242307
    smarta-brett

    sorry – here it is

    September 1, 2020 at 12:28 am #1242315
    smarta-brett

    Hi Again

    I did implement
    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
    but could not get the logo to center properly

    it seems there are several ways to do this – can you suggest which one i should implement so that you guys can help me with tweaking it

    I’m happy to leave as is or to use the header widget method – just let me know and I will put the one you suggest in place and we can work from there

    September 1, 2020 at 6:03 am #1242365
    smarta-brett

    this is the correct log-in details

    September 2, 2020 at 3:33 pm #1242837
    Ismael

    Hi,

    Yes, there are several ways to do this but let’s just keep the current implementation and go from there.

    Please add this css code to hide the top header.

    #header_meta {
	height: 0;
	min-height: 0;
}

    We also set the Enfold > Header > Header Layout > Menu and Logo Position settings to Logo center, menu below to keep the logo in the sticky header.

    Best regards,
    Ismael

    September 2, 2020 at 11:58 pm #1242948
    smarta-brett

    Ok thanks Ismael

    I added that CSS & checked that the menu was still set to center/menu below and sticky is checked
    the logo is still
    – too small
    – not centered
    – the space & line still appears above the logo
    – there is also a line and a white space under the logo panel that I can’t seem to isolate when I try to inspect

    on mobile version I have set the 3rd part burger menu to no show
    the Enfold burger menu works but the logo drops down below

    thanks again for you ongoing support!!

    September 3, 2020 at 12:06 am #1242955
    smarta-brett

    I am still having issues here – any chance somebody can help me out

    September 8, 2020 at 6:07 am #1244164
    Ismael

    Hi,

    Thank you for the update.

    The header layout was broken because the anchor or link tag in the phone field was not closed properly. We closed the tag and set the header size settings to large instead of slim. We also adjusted the css code in the Quick CSS field, and added this code to remove the default menu container.

    #header_main_alternate {
	display: none;
}

    Best regards,
    Ismael

    September 8, 2020 at 6:34 am #1244170
    smarta-brett

    great – thanks for that Ismael

    – and please pardon my lack of coding skills – I’m a little new to this level of customisation !!

    there are still two issues

    – can the book now button be positioned closer to the right hand side of the page – in its current position its making the logo look off center

    – and there is still white area at the top of each page as shown in the image below
    I have inspected the page but cannot locate what the area is called – it doesn’t seem to be part of the header as it moves up with the page – it appears on all pages – I can’t see anything on the page(s) themselves that would be causing it
    image
    https://diamondbeachcabarita.com.au/wp/wp-content/uploads/2020/09/Screen-Shot-2020-09-08-at-2.28.41-pm.png

    September 10, 2020 at 6:12 am #1244751
    Ismael

    Hi,

    You’re welcome. We also added the following css code to get rid of the space below the header and to move the booking button farther to right and align it a bit vertically. 

    .phone-info {
	position: absolute;
	right: -80px;
	top: 20px;
}
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main {
	padding-top: 108px;
}

    We could adjust the right and top position when necessary.

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

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