How to get this two part menu to scroll and not overwrite the top fixed menu

HTML & CSS
1

Background:

When the new web page flat file fashion started I modified and standardised the old image enhanced menu system. Times change and the current trend is to have pages split diagonally…

First Attempt:

I tried using CSS borders to obtain the diagonal effect and ran into far too many problems so dropped the idea and moved on to using SVG The menu looks OK until the page is scrolled :frowning:

Page layout:

  1. PHP dynamic top menu is split and has five links
  2. Immediately below are the associated sub links
  3. Main body
  4. Footer

Problems:

I am struggling with CSS position fixed, absolute, background SVG images and not forgetting CSS z-index.

Desired Result:

I would like the main five links (Home, SVG, First, Second and Source) to remain fixed at the top of the page and not to be overwritten when the page scrolls.

Online Demo

Also other colour schemes and diagonal positions welcomed.

2

While they are both at Z2 the later element will be on top, so the top menu needs a higher Z.

1 Like
3

After a good night’s sleep I thought of another way to solve the problem by dispensing with the convoluted divs that misused z-index:… only use a single SVG file as a background image. It was no mean task :frowning:

Happens that although the SVG displayed without errors all by itself and also when included in a page; there was much fun and games trying to use the SVG as a background image :frowning: Numerous changes had to be made before it would stretch responsively and to do what I wanted it to do!

While searching for a solution I discovered that instead of loading and echoing the SVG file contents it was remarkably simpler to use CSS clip-path and background-image :frowning:

<?php 
 $svgFile  = '<div style="position:absolute; left; 0; top:0; '
               . 'width:100%; margin-top: 4em; z-index: -11; '
               . 'height: 15em; '
               . 'background-image: linear-gradient(90deg, blue, 0, royalblue);' 
               . '-webkit-clip-path: polygon(100% 0, 0% 100%, 0 0); '
               . 'clip-path: polygon(100% 0, 0% 100%, 0 0); '
               . 'z-index: -1;'
           .'</div>'
           ;

Needless to say a new problem has arisen that any link which should be shown in the triangle’s white section is hidden and I am unable to get the <h1> ... </h1> tag to position correctly. I have had enough for one day and hope to continue tomorrow.

Online Clip_path Demo

4

Well that’s exactly what I would expect to happen with a clipping path.
Another simple lightweight way to make the angled background image would be to use a gradient, that may be worth a try.

5

I copied this CSS from https://ampByExample.com and thought the clip path applied to the full div. On a second look I noticed the clip-path only applies to the section of the background-image. Very similar to using the standard border-bottom… I think, but could be wrong :slight_smile:

.www-header {
    background-image: linear-gradient(90deg,#94103e 0,#db004d);
    padding: 7rem 0;
    color: #fff;
    -webkit-clip-path: polygon(100% 100%,100% 0,-400% 0);
    clip-path: polygon(100% 100%,100% 0,-400% 0);
}

[quote="SamA74, post:4, topic:295221"] Another simple lightweight way to make the angled background image would be to use a gradient, that may be worth a try. [/quote] I will investigate further.

I have updated the online testing.

6

In that example the content is contained within the bounds of the clipping path, so does not get cut off like yours.
It appears that they added sufficient padding to keep the content clear of the clipped zone.

To have a clipping path not clip off content, you would have to apply it to another element positioned beneath your content. But for me it seems that says clipping path is not the right answer, and a background image is.

It’s not working currently, it’s showing errors.

With a gradient you could try something like:-

background-image: linear-gradient(175deg, royalblue, 9em, transparent, 9em, transparent);

Though you may want to tweak the numbers for your design. One difference is it will give a constant angle at varying widths.

1 Like
7

I did try and was disappointed with the lack of responsiveness :frowning:


[quote="SamA74, post:6, topic:295221"] With a gradient you could try something like:- ``` background-image: linear-gradient(175deg, royalblue, 9em, transparent, 9em, transparent); ```

Though you may want to tweak the numbers for your design. One difference is it will give a constant angle at varying widths.
[/quote]
My feeble attempts were exasperating and futile :frowning:


I have used PHP to gracefully trap the 404 page and it now displays: (source code online in the class.php file)

Error page detected
Page ==> /clip_path
Defaulting to home page

I have simplified the PHP menu module by eliminating the if/else/endif statements and creating separate PHP files for each main menu item. Source can be selected by the top Menus item.Source code for index.php is also simplified along with other PHP files which can be selected by the top Source item.

CSS tweaking the split menu makes PHP seem so much easier :slight_smile:

8

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