Jump to content
  • 0

Navigation Menu on datapages

beepbeep

Asked by beepbeep,

 Share

Question

beepbeep Newbie

beepbeep

Posted
Posted

 

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

11 answers to this question

Recommended Posts

  • 0
beepbeep Newbie

beepbeep

Posted
  • Author
Posted

<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
beepbeep Newbie

beepbeep

Posted
  • Author
Posted

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
Tubby Collaborator

Tubby

Posted
Posted
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
Queso Collaborator

Queso

Posted
Posted

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
  • 0
Anan24 Rookie

Anan24

Posted
Posted
On 5/31/2023 at 1:39 AM, beepbeep said:

 

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

 

Users are encountering bullets appearing above their navigation menu, likely due to default list styling. To remove the bullets, apply CSS that sets the list-style-type to none for the unordered list containing the menu items. If issues persist, ensure there are no conflicting styles affecting the menu items.

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...
×
 Share
Go to question listing
×
×
  • Create New...