Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 27, 2020 at 12:43 pm #1241188
    GearsDesignWork

    I have a home page with a Animated layer slider. When viewing on a Macbook or iPad the menu takes up an incredible amount of space – added to the browsers tabs I’m losing almost a third of the screen space. In this environment, the words at the foot of the slider are not visible.
    I want to know if there’s an option to have the reduced menu on this page, without the need to scroll down and for the social icon bar not to show – as a simple, half-height menu bar for visitor to click to navigate the site is sufficient to sit above the Animated slider.

    I have various options:
    Transparent
    Hide header on this page etc.

    But I want no social icon / message bar and also a half height Header menu

    Many thanks

    August 28, 2020 at 9:26 am #1241473
    Victoria

    Hey GearsDesignWork,

    Could you please attach a mockup of what you’re trying to achieve?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 1, 2020 at 10:39 am #1242461
    GearsDesignWork

    Hey there – sorry for the delay I’ve been away August Bank Holiday!

    OK so if you look at this page – http://print-engine.net/testing/print-services/

    You will see that at the top is a grey menu bar, below that is the Heading Strip – where the logo and menu sits. If you scroll down the page, that Heading area reduces in height and the grey menu bar disappears.

    I want a single page (the home page) which has some Animated Sliders to open as if it had been scrolled down – that is: not to have the grey menu bar and also to have the logo / menu height the same as if you had scrolled down. So when the page opens there is no grey menu bar and the Logo / menu section is half the height.

    One solution I’ve thought of is to set the page template to NO HEADERS – and to create a new Full Width Menu that looks the same in style and put the LOGO in the slider itself.

    See here:

    Home

    Many thanks
    GDW

    September 7, 2020 at 5:30 am #1243851
    Ismael

    Hi,

    Thank you for the inquiry.

    This css code should remove the top bar and adjust the height of the header as if the page has been scrolled down.

    .home #header_meta {
	display: none !important;
}

.home .container.av-logo-container, .home .container.av-logo-container li, .home .container.av-logo-container li a, .home .container.av-logo-container .logo a, .home .container.av-logo-container .logo a img {
	height: 58px !important;
	max-height: 58px !important;
	line-height: 58px !important;
}

.html_header_top.html_header_topbar_active.html_header_sticky.html_large .home #main {
	padding-top: 90px;
}

    Best regards,
    Ismael

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