Monitor Reply

Support

Adding a block above the Top NAV

Permalink Browser Info Environment September 27, 2020 at 6:40 PM

Hello,

First of all! Great template.

I want to ask how I can add a content block above the top nav section likehttp://adtech.co.uk does. I have a multilingual site and this would help visitors choose the language by seeing it first on the top there, as well as adding contact info, just as it is likehttp://adtech.co.uk.

I am having some issue adding a circular logo to the logo block. I may resort to text but it won't be what I want. I can scale the logo down to about 70px but it still bloats out when I publish.

Any help much appreciated.

// Yusuf

Type:	Pre-Sale
Status:	In Progress

VidalThemes replied on Sep 28, 2020 at 9:37 am Permalink Reply

Hi Yusuf,

Thanks a lot for your purchase, and its good to hear you are enjoying using Modena so far.

The area above the nav on the Adtech site was a customisation that we were hired to add to the site, unfortunately, it's not part of the stock theme, if you are happy making alterations to the site's code yourself we can supply you with the code to achieve the area you want, please let us know if you want the code and we will sort it out for you.

The logo is a tricky one, without seeing it, if you are currently using the "content" block to add your logo image, it might be an idea to use the "image" block instead, as this will not force, dimensions on the logo. There is also a section in the docs about setting up your logo for use on the site, (http://modena-docs.vidalthemes.com/) it's under the sub-heading "Adding your own logo" and it's in the "Home-page setup" section. if that does not resolve the issue, please send us over a link and we will take a look and get back to you.

Best regards

David

yusufdebruijn replied on Oct 5, 2020 at 2:26 pm Permalink Reply

Sorry for the tardy reply. Yes please, send the code for the top banner.

I have settled without the logo, however is it possible to play a mp4 or H.264 movie in the hero block, like the pixel theme?

Thanks
Yusuf

VidalThemes replied on Oct 6, 2020 at 11:24 am Permalink Reply

Hi Yusuf,

Not a problem, I will sort out the code and post back here.

As far as video in the hero unit goes, we don't currently offer this functionality, there is an add-on in the marketplace, it is a paid add-on and it does require some CSS tweaks, but apparently, it works ok with Modena, please see this forum post for a few more details:https://www.concrete5.org/marketplace/themes/modena/support/adding-v...

We are looking at adding a video option in a future update, watch this space, hopefully wont be too long.

Best regards

David

VidalThemes replied on Oct 7, 2020 at 9:58 am Permalink Reply 1 Attachment

Hi Yusuf,

Please find attached to this post the new header with the top bar, please follow the instructions below to install it:

1/ FTP into your C5 install and go to the following location: packages>modena>themes>modena>elements

2/ In this folder you will see "footer.php", "styles.php" and "header.php" please make a copy of "header.php" and store it safely on your computer, this is your backup in case anything goes wrong.

3/ Replace "header.php" with the new "header.php" from the file attached to this post.

next, you will need to add some CSS to get the whole lot working, please follow the steps below:

1/ Follow step one above but instead of going into "elements" please go into "css" then open up the folder "layout".

2/ Open up the file "_headers.less" scroll all the way to the bottom and after the final closing bracket, paste the following CSS:

.ccm-page .top-area {
    position: fixed;
    top: 0;
    z-index: 135;
    background-color: #fff;
}
.ccm-page .custom-height {
    height: 35px;
}

3/ save the file, then go into your C5 site and clear the cache, I would also clear the browser cache to be sure.

The new top areas should now be available in edit mode.

Please note that these modifications will be overwritten by future updates, so you will need to re-add the modifications when an update is applied to the theme, unfortunately, there is not much we can do to prevent this.

Any issues please let me know.

Best regards

David

yusufdebruijn replied on Nov 1, 2020 at 6:16 pm Permalink Reply

Thank you.

I just implemented this and found that the fixed heading was covering the links and sitename on mobile device, so i changed header css to

.ccm-page .top-area {
position: relative;

This kinda helped but on the desktop the new top header is too close to the navbar and slightly covering the sitename. see de.izwien.at for example. Any ideas on how to spread them a bit apart from eachother, also on the mobile app, so not covering the links section.

Thank you
Yusuf

VidalThemes replied on Nov 2, 2020 at 2:26 pm Permalink Reply

Hi Yusuf,

My appologies, there is a piece of CSS missing from my original reply to get this to work on mobile devices, please add the following CSS:

@media (max-width: 48em) {
    .ccm-page .primary-header--fixed-nav {
        top:70px
    }
}

You will need to restore the "position: fixed" line, as it will not work with "position: relative".

Best regards

David

yusufdebruijn replied on Nov 3, 2020 at 11:01 am Permalink Reply

Hi David,

Thanks for the reply.

Now the NAV on mobile has disappeared with the logo. Nothing has changed on the desktop view.

Any ideas?

Regards
Yusuf

VidalThemes replied on Nov 4, 2020 at 3:39 pm Permalink Reply

Hi Yusuf,

Hmmm, leave this with me I will have a good look at it and get back to you, its all working well on adtech so can't understand why it's not working for you.

Best regards

David

VidalThemes replied on Nov 6, 2020 at 2:48 pm Permalink Reply

Hi Yusuf,

Could you please try the following CSS instead please, please delete what you have already and replace it with the following:

.ccm-page .top-area {
    position: fixed;
    top: 0;
    z-index: 135;
    background-color: #fff;
}
.ccm-page .custom-height {
    height: 35px;
}
.ccm-page .primary-header--fixed-nav {
    position: fixed;
    top: 35px;
    left: 0;
    z-index: 125;
}

Viewing 15 lines of 20 lines. View entire code block.

 
.ccm-page .top-area {
    position: fixed;
    top: 0;
    z-index: 135;
    background-color: #fff;
}
.ccm-page .custom-height {
    height: 35px;
}
.ccm-page .primary-header--fixed-nav {
    position: fixed;
    top: 35px;
    left: 0;
    z-index: 125;
}
@media (max-width: 48em) {
    .ccm-page .primary-header--fixed-nav {
        top: 70px !important;
    }
}

That should sort it for you, please let me know how you get on. If it does not sort it this time I think the only option we have is for me to send you the entire CSS folder from the adtech site to transplant into yours.

Best regards

David

yusufdebruijn replied on Nov 7, 2020 at 9:19 am Permalink Reply 1 Attachment

Still nothing. This is how the _headers.less file looks like. Maybe I am doing something wrong.

Yusuf

VidalThemes replied on Nov 7, 2020 at 2:34 pm Permalink Reply

Hi Yusuf,

Could you delete that code out of headers.less and place it in the CSS editor within Concrete5 instead. To do this please follow the steps below:

1/ Click on the "Cog" icon on the top left of the concrete5 admin bar, from the menu select "Design" and then click "Customize" on the blue overlay.

2/ From the customize options scroll all the way to the bottom until you see the "Advanced" section, under that click on the "Cog" icon that is next to the words "Custom CSS" in the CSS window that appears paste in the CSS code:

3/ Click on "save changes" then click on "Entire site" and publish your page.

Hopefully, that should sort the issue.

Best regards

David

yusufdebruijn replied on Nov 7, 2020 at 6:23 pm Permalink Reply 1 Attachment

YESSS! It worked... but a small request. The desktop view cuts off the logo and is too close to the links. I would like to distance them more.

Mobile app version is perfect.

Thank you
Yusuf

VidalThemes replied on Nov 7, 2020 at 7:14 pm Permalink Reply

Hi Yusuf,

That's great news, knew we would get there in the end :)

No problem, that's a pretty easy fix, in this section:

.ccm-page .top-area {
    position: fixed;
    top: 0;
    z-index: 135;
    background-color: #fff;
}

where it says "top: 0", change the "0" to "35px" so it looks like this:

.ccm-page .top-area {
    position: fixed;
    top: 35px;
    z-index: 135;
    background-color: #fff;
}

Best regards

David

yusufdebruijn replied on Nov 7, 2020 at 7:43 pm Permalink Reply 1 Attachment

I got this now? :(

yusufdebruijn replied on Nov 7, 2020 at 8:45 pm Permalink Reply

I need to shift the space behind the new editable top area.

VidalThemes replied on Nov 7, 2020 at 9:03 pm Permalink Reply

Hi Yusuf,

Very sorry my mistake, I was thinking that area was the header, and of course its not, please add this to your CSS.

.ccm-page .primary-header--fixed-nav {
    top: 35px;
}

And please reset the code I told you to change previously back to "top: 0;"

Best regards

David

yusufdebruijn replied on Nov 14, 2020 at 5:33 pm Permalink Reply 1 Attachment

Hi, it is me again. Is it possible to move IZW and the top main nav a bit more down. The language area is too close to IZW. See attached file. I want to move it down like at least 20-30px

Thanks
Yusuf

VidalThemes replied on Nov 17, 2020 at 2:45 pm Permalink Reply

Hi Yusuf,

Sorry for the delay getting back to you.

It looks like the last bit of CSS I gave you hasn't been added, that is the bit of code that pushes the header down, but its not present in the code.

Best regards

David

yusufdebruijn replied on Dec 9, 2020 at 4:23 am Permalink Reply

OK, so what do I need to do to make that happen/work. I plan on launching the site on 1.1.2021.

Regards
Yusuf

VidalThemes replied on Dec 9, 2020 at 9:57 am Permalink Reply

Hi Yusuf,

This bit of code needs to go in the CSS:

.ccm-page .primary-header--fixed-nav {
    top: 35px;
}

Please follow these instructions to add it:

1/ Click on the "Cog" icon on the top left of the concrete5 admin bar, from the menu select "Design" and then click "Customize" on the blue overlay.

2/ From the customize options scroll all the way to the bottom until you see the "Advanced" section, under that click on the "Cog" icon that is next to the words "Custom CSS" in the CSS window that appears paste in the CSS from above.

3/ Click on "save changes" then click on "Entire site" and publish your page.

Best regards

David

yusufdebruijn replied on Feb 10, 2021 at 3:19 pm Permalink Reply

Hello David,

I am still working on the Modena Theme and need some help.

I realised that the scrolling header nav needs to have colors specified but could not find them.
if you go to de.izwien.at/welcome - when you scroll the page the white nav goes green, and the sublinks stay white.

what style names are these when I go to cog > design > customize

Thanks for your help
Yusuf

VidalThemes replied on Feb 13, 2021 at 7:56 am Permalink Reply

Hi Yusuf,

Very sorry for the delay getting back to you, at the moment Concrete5.org is not notifying us of new or additional support requests, so we are having to manually check, which is not ideal, but apologies for not getting to you sooner.

The items you want are under the heading "Desktop nav" in the design menu, and are "Text on scroll" and "Text on scroll hover"

Best regards

David

Modena

Support

Adding a block above the Top NAV

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post