Jump to content
  • 0

Navigation Menu on datapages


beepbeep

Question

 

I'm creating a navigation menu so that my users can jump between data pages easily. I've watched Ned's Youtube video and pulled the CSS from W3schools, but when I get it set up I always have these bullets above the menu. Does anyone have any idea what is causing this or how to get rid of the bullets?

image.png.82c934531aa03d5da4be259909351155.png

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
</style>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

<p></p>

Link to comment
Share on other sites

  • 0

So I was able to get rid of the bullets, but I have these brackets showing up above the menu bar, and I can't find where to get rid of them. 

image.png.a565aeecd018fddf44b555b7fa7b343e.png

 

This is my header: 

<span style="font-size:16px;"></span><img alt="Logo" src="insertlogoimage" />
<br />[@app:StudentNavMenu]
<span style="font-size:16px;"><strong><span style="color:#1F7F9b;"><br>Approved Schedule:&nbsp;</span><span style="color:#D45B25;">[@field:FirstName]&nbsp;[@field:LastName]</span></strong></span><br />
&nbsp;

 

This is my app parameter:

<style>
ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #1f7f98;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  font-size: 15    px;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  line-height: 12px;
  height: 16px;
}

li a:hover {
  background-color: #D45b25;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Approved Schedule</a></li>
  <li><a href="#contact">Course Request</a></li>
  <li><a href="#about">Elective Catalog</a></li>
  <li><a href="#about">Logout</a></li>
</ul>

</body>
</html>

 

Link to comment
Share on other sites

  • 0
On 5/31/2023 at 10:47 PM, beepbeep said:

So I was able to get rid of the bullets, but I have these brackets showing up above the menu bar, and I can't find where to get rid of them. 

image.png.a565aeecd018fddf44b555b7fa7b343e.png

 

This is my header: 

<span style="font-size:16px;"></span><img alt="Logo" src="insertlogoimage" />
<br />[@app:StudentNavMenu]
<span style="font-size:16px;"><strong><span style="color:#1F7F9b;"><br>Approved Schedule:&nbsp;</span><span style="color:#D45B25;">[@field:FirstName]&nbsp;[@field:LastName]</span></strong></span><br />
&nbsp;

 

This is my app parameter:

<style>
ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #1f7f98;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  font-size: 15    px;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  line-height: 12px;
  height: 16px;
}

li a:hover {
  background-color: #D45b25;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Approved Schedule</a></li>
  <li><a href="#contact">Course Request</a></li>
  <li><a href="#about">Elective Catalog</a></li>
  <li><a href="#about">Logout</a></li>
</ul>

</body>
</html>

 

Just remove <html> and <body> on your app parameter. They don't render those because datapages already has them:
 

<style>
ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #1f7f98;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  font-size: 15    px;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  line-height: 12px;
  height: 16px;
}

li a:hover {
  background-color: #D45b25;
}
</style>
</head>
 

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Approved Schedule</a></li>
  <li><a href="#contact">Course Request</a></li>
  <li><a href="#about">Elective Catalog</a></li>
  <li><a href="#about">Logout</a></li>
</ul>


try if this works

Link to comment
Share on other sites

  • 0

Hi @RichG!

If you are using Tubby's suggested code, you can add an !important rule in the Property Value "list-style-type: none;" to add more importance to that Property Value, or to overwrite the default styling applied. Here is an updated code that you can try: 

 

<style>
ul {
  list-style-type: none !important;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #1f7f98;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  font-size: 15    px;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  line-height: 12px;
  height: 16px;
}

li a:hover {
  background-color: #D45b25;
}
</style>
</head>
 

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Approved Schedule</a></li>
  <li><a href="#contact">Course Request</a></li>
  <li><a href="#about">Elective Catalog</a></li>
  <li><a href="#about">Logout</a></li>
</ul>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...