Bootstrap 4 CSS modifications and changes
Budget: $15 – $25 USD
I have a Bootstrap 4 event/party template that has been altered to a specific use.
I'm no CSS genius, and it's always challenging to work inside another person's code, so I need a little help to finalize things.
A few elements need to have CSS modifications or entirely new CSS written to achieve the desired effect. This site will only be live for 2 months, so no need to re-invent the wheel on this project.
Adding new or modified CSS to the main page should suffice.
This is the url of the page
http://chicagomeetandgreet.com/2022/halloween2022-upwork.html
Things needed on this page:
1)
The nav-bar header in desktop view and mobile has a weird situation occuring.
If you click on the links in the nav-bar, the one named "Ladies" keeps it's active state when it's no longer needed to be active.
It needs to behave like the other nav-bar links.
Modifying the existing CSS code or just writing new CSS wouldboth work, whichever is easier to deal with should work.
2)
The "Ladies" gallery might be easier to modify with all new CSS, but whatever fits your comfort level will work here as well
NOTE:
The existing gallery code has remnants of a "filtering by category" option.
None of that needs to be used at all.
example of current code:
div class="filtr-item hover-details-overlay-effect-1" data-category="All,Jack-o-lanterns" data-popup-id="2" data-src="img/ladies/1.jpg"
None if those "data-" parts are needed, as there is no filtering to show categories being used.
When I was trying to remove parts of that filtering code the gallery would break, so maybe some new CSS to achieve the same overall look and feel would be the easier way o go on this part.
Images need to link to an external website, either in that overlay or by a href on the image/name below.
The "overlay" in desktop size is a-ok, but I need the overlay and/or text on that overlay to link to an external website, opening up in a new window. I do NOT need the overlay/link to open up a larger image.
If that link from the overlay is too problematic I can do without it, and just link the image/name beneath to a website opening up in a new window.
I would need the gallery to behave the exact same way when viewed on mobile/iPhone.
The way the CSS is currently coded the overlay does not appear in mobile. If it can that would be good.
I'm no CSS genius, and it's always challenging to work inside another person's code, so I need a little help to finalize things.
A few elements need to have CSS modifications or entirely new CSS written to achieve the desired effect. This site will only be live for 2 months, so no need to re-invent the wheel on this project.
Adding new or modified CSS to the main page should suffice.
This is the url of the page
http://chicagomeetandgreet.com/2022/halloween2022-upwork.html
Things needed on this page:
1)
The nav-bar header in desktop view and mobile has a weird situation occuring.
If you click on the links in the nav-bar, the one named "Ladies" keeps it's active state when it's no longer needed to be active.
It needs to behave like the other nav-bar links.
Modifying the existing CSS code or just writing new CSS wouldboth work, whichever is easier to deal with should work.
2)
The "Ladies" gallery might be easier to modify with all new CSS, but whatever fits your comfort level will work here as well
NOTE:
The existing gallery code has remnants of a "filtering by category" option.
None of that needs to be used at all.
example of current code:
div class="filtr-item hover-details-overlay-effect-1" data-category="All,Jack-o-lanterns" data-popup-id="2" data-src="img/ladies/1.jpg"
None if those "data-" parts are needed, as there is no filtering to show categories being used.
When I was trying to remove parts of that filtering code the gallery would break, so maybe some new CSS to achieve the same overall look and feel would be the easier way o go on this part.
Images need to link to an external website, either in that overlay or by a href on the image/name below.
The "overlay" in desktop size is a-ok, but I need the overlay and/or text on that overlay to link to an external website, opening up in a new window. I do NOT need the overlay/link to open up a larger image.
If that link from the overlay is too problematic I can do without it, and just link the image/name beneath to a website opening up in a new window.
I would need the gallery to behave the exact same way when viewed on mobile/iPhone.
The way the CSS is currently coded the overlay does not appear in mobile. If it can that would be good.