Hide the side menu icon on ONLY the home page?

TraceyYates · Post by **TraceyYates** » Mon Aug 22, 2022 3:26 am

My UX designer is recommending that I get rid of the side menu icon on my help Home page, as the 1st-level headings in it are redundant with the icon carousel in the middle of the home page. I have found how to hide the icon on ALL the help pages by editing the HTML5 - Top Navigation file, but not how to do it on only the Home page. Any guidance on how to do this would be deeply appreciated.

Thanks,
Tracey

Post by **NorthEast** » Mon Aug 22, 2022 5:32 am

There's an answer to the same question here: viewtopic.php?f=9&t=33707&p=144257#p144252

TraceyYates · Post by **TraceyYates** » Tue Aug 23, 2022 10:20 am

Hmmm . . . I followed the directions in the previous forum post, but did not get the same results (the side menu icon did not disappear on the home page).

I have a separate style sheet for the home page, named ESO_StylesForHomePage.css. In that style sheet, right after the body tag, I have added the recommended code

nav.sidenav-wrapper
{
display: none;
}

In my Home.htm file, I reference the style sheet for the home page:

<head>
<link href="Resources/Stylesheets/ESO_StylesForHomePage.css" rel="stylesheet" type="text/css" />
</head>

The side menu still appears on my Help's home page, as well as all the other pages. What am I overlooking?

Thanks,
Tracey

Post by **NorthEast** » Tue Aug 23, 2022 10:55 pm

TraceyYates wrote:In that style sheet, right after the body tag, I have added the recommended code

Are you sure? A stylesheet is CSS, so it doesn't contain a body tag, or any HTML tags.

Anyway, if you check your home page in the output, does the head section contain the link to ESO_StylesForHomePage.css?
If it doesn't, then make sure in your target General tab that Allow local stylesheets is selected - this is required if you have chosen a Primary stylesheet.

TraceyYates · Post by **TraceyYates** » Wed Aug 24, 2022 3:53 am

Hmmm . . . I've checked the Home.htm file in my output, and it DOES have the line linking it to ESO_StylesForHomePage.css, and

<link href="Resources/Stylesheets/ESO_StylesForHomePage.css" rel="stylesheet" type="text/css" />

I checked the target's General tab anyway, and my Primary Stylesheet field is set to (default), so I'm not currently using any local stylesheets.

I checked my ESO_StylesForHomePage.css about the body tag, and this is what it has:

body
{
font-family: 'Open Sans';
font-weight: bold;
font-size: 16px;
line-height: 20px;
letter-spacing: 0px;
background-repeat: no-repeat;
background-position: center;
background-image: url('../Images/BackgroundImage.jpg');
}

nav.sidenav-wrapper
{
display: none;
}

Are the body tag attributes messing with the nav.sidenav-wrapper in some way?

Thanks,
Tracey

Post by **NorthEast** » Wed Aug 24, 2022 5:29 am

It works fine for me.
You'd need to check the output using the browser tools (F12) - select the <nav class="sidenav-wrapper"> tag, then check what other CSS is being applied to it.
If some other CSS is taking precedence over your CSS, then you might need to tweak your CSS - e.g. make it more specific, or use display: none !important;

TraceyYates · Post by **TraceyYates** » Thu Aug 25, 2022 1:27 pm

With the help of my UX designer, I believe I have tracked down the style sheet that is taking precedence over my ESO_StylesForHomePage.css file. It appears that a style sheet called Tablet.css is the culprit, and I infer that the Tablet.css file is generated by Flare during the build process.

After fiddling with things a bit, my final solution was to add the

Code: Select all

.title-bar .menu-icon span

tag and attribute to my ESO_StylesForHomePage.css file, below the

Code: Select all

nav.sidenav-wrapper

tag:

Code: Select all

nav.sidenav-wrapper
{
	display: none;
}

.title-bar .menu-icon span
{
	display: none;
}

I don't know why the solution that David Lee pointed me to didn't work (I agree with him that it should have), so I thought I'd share my little addition to the the stylesheet that made if work for me. Hopefully someone else out there will find it useful, too.

Thanks,
Tracey

MadCap Software Forums

Hide the side menu icon on ONLY the home page?

Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?

Re: Hide the side menu icon on ONLY the home page?