Cookie banner is not displaying as intended when using Hugo with Docsy theme

support
1

I am developing a sample website using Hugo static website generator by using the Docsy theme.

The website includes the Cookie Banner so I have added the same to my static website by referencing the approach mentioned from here: Cookie consent | Hugo Codex.

Ideally, I would like the banner to be visible something like this:

enter image description here

But currently its looking something like this:
enter image description here

When I have added it along with styles and partials its not looking like that. Maybe some style is messing up the child cookie consent styles but unable to figure out the same. Can someone please let me know what am I doing wrong here?

I have added my complete code in following github project:

I am quite new to Hugo and Docy so getting bit confused on the folder and file structure hence unable to figure out which parent style is messing up my Cookie consent modal. Can someone please help me with some suggestions?

2

cc @jhvanderschee

3

@tut @jhvanderschee

Thanks a lot for tagging.

Can you please provide some suggestions or workarounds for this issue? I tried a few things but am still unable to figure out what style is messing up my design.

Thanks a lot in advance.

4

This is a code snippet for front-end developers… as you can read on the Hugo Codex website. This is how it it supposed to look (for you to style correctly). A styling example can be found on the Hugo Codex website.

Cookie banners are obligatory ‘punishments’ for website (owners) that invade your privacy. You are clearly not doing that. No banner means no privacy invasion. Why would you punish yourself with a banner?

2 Likes
5

@jhvanderschee

Thanks a lot for the response.
Actually I would like to display the message indicating we do not store any cookies or any other information during usage so I thought of using the same banner with different message. Hence, I am trying to use that.

I have used the styles mentioned in the Hugo Codex Website and placed everything but still maybe some styles are not hitting or some parent in overriding them which I am unable to understand.

So I posted here so someone can suggest where I am missing something. Please let me know if there is something that I can try to fix this.

6

@jhvanderschee
Please let me know if there is something that I can try to fix the styling issue.

7

I do not really feel like running docker images or running npm install. If you publish your site on a development URL I will write some CSS to make it beautiful.

However, you should be able to ask any front-end dev… this is not Hugo-specific at all.

1 Like
9

This should be removed:

font-size: s;
transform: translateY(100vh);
color: var(--color-warning);
background-color: var(--color-warning-bg);
width: 100%;

This should be added:

background: white;
border-color: white;
margin-left: -15px;
width: calc(100% + 30px);
1 Like
10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.