What are the top Navigation options in SharePoint 2010?

I have customized the default top navigation in SharePoint 2010 using CSS styles. However, I also want to enhance it by adding icons (.png images) for each navigation menu item. For example, I would like to add an icon next to "Home", another one next to "About Us", and so on for "Practices," "Sectors," "Our Events," "Our People," "Publications," and "Working for Us."

The top navigation in SharePoint 2010 is built using asp controls. I can view the HTML structure of the top navigation using Firebug (Firefox) and developer tools (IE), but it's not visible on the master page.

What is the best approach to include icons in the top navigation items?

Thank you in advance

javascriptsharepoint-2010css

Answer №1

If you want to customize this section of the menu, you'll need to create your own asp.net control. Unfortunately, out-of-the-box functionality only allows for CSS modifications and limited control over displayed content. However, you can still utilize the same DataSource if you prefer to let SharePoint manage the user interface.

Answer №2

Dealing with a similar issue on a recent project, I encountered the challenge of adding unique icons to the main menu items without a straightforward targeting method.

To overcome this obstacle without resorting to a custom control, I employed jQuery to assign a class that dynamically increments based on the number of menu items. Subsequently, I utilized this class in my CSS for styling purposes.

$("a.menu-item").each(function(i) {
    $(this).addClass("nav-" + (i+1));
});

Hopefully, this solution proves beneficial for you as well!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript regular expression to find words, excluding words enclosed by forward slashes

I have a regular expression that is functional in PHP: (?<![\/?$])\bfoo\b Now, I am trying to adapt it for use in JavaScript. Specifically, I want it to match the following patterns: foo - need this <div>foo</div&g ...

javascriptregex

Utilizing a Meteor Method within a Promise Handler [Halting without Throwing an Error]

I've been working on integrating the Gumroad-API NPM package into my Meteor app, but I've run into some server-side issues. Specifically, when attempting to make a Meteor method call or insert data into a collection within a Promise callback. Be ...

javascriptnode.jsmeteornpmpromise

What is the best way to attach an event again in jQuery?

My JavaScript/jQuery code initiates a listener to highlight DOM elements when a button is clicked. By clicking the button, the listener event starts (e.g. highlight : function()). If I click on any part of the webpage, the listener stops. However, if I ...

javascriptjqueryonclick

The customized Vaadin component with a tag is missing from the MainView layout

I am attempting to integrate my custom vis component into the MainView VerticalLayout. However, it is appearing above the layout and the layout itself contains an empty component tag. Custom component code In this section, I have labeled my component as " ...

javascriptjavahtmlvaadinweb-component

Encountering issues while attempting to pass a function into axios.then and catch and receiving errors

axios.post('http://localhost:3000/api/v1/login', { email: this.state.email, password: this.state.password }, { headers: { "Access-Control-Allow-Origin": "*", ...

javascriptreactjsaxios

Utilizing Angular: Filtering Views Based on JSON Data Values

I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the a ...

javascriptangularjsjsonfilter

Adding Firestore document IDs to an array

I am exploring Vue.js and Firestore for the first time, working on a project that is slightly bigger in scale. Within my Firestore database, I have a collection with three documents. My goal is to extract the document IDs and store them in an array. The co ...

javascriptvue.jsgoogle-cloud-firestore

My JavaScript seems to be having an issue with .className - can anyone help me troubleshoot

I'm currently working on a navigation menu, and my objective is to have the class change to .nav-link-active when a link is clicked, while also reverting the current .nav-link-active back to .nav-link. Here's the code snippet I am using: <he ...

javascripthtml

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

javascripthtmlcssgoogle-chrome

The API call for /api/users/create was resolved without a response, which could potentially lead to requests getting stuck. This issue was detected in

I've developed an API endpoint to manage user account creation within my Next.js application, utilizing knex.js for handling queries. Despite this, I keep encountering the following error: API resolved without sending a response for /api/users/create ...

javascriptnode.jsapinext.jsknex.js

Filter input in jQuery for a textarea box

I implemented a modification of this technique in my code. The main purpose is to prevent unauthorized characters from being entered by the user (there is also a filter on the server side). $('#someinput').keyup(function() { var $th = $(this ...

javascriptjqueryregexfilterkeyup

What could be causing worker threads to fail when instantiating a class from a separate file?

The following TypeScript file is being used: import { Worker, WorkerOptions, isMainThread, parentPort } from "worker_threads"; import path from "path"; export class SimpleWorker { private worker: any; constructor() { i ...

javascriptnode.jsnode-worker-threads

Obtain data attributes using JQuery's click event handler

I'm facing an issue with a div structure setup as follows: <div class='bar'> <div class='contents'> <div class='element' data-big='join'>JOIN ME</div> <div class=& ...

javascriptjqueryhtmltypescriptcustom-data-attribute

ways to set a background color for a textarea element using bootstrap

How can I add a background color to my text area field in Bootstrap? <div class="form-group"> <div class="col-xs-12"> <textarea class="form-control" id="exampleTextarea" rows="6" placeholder="Message" style="background-color: #f ...

csstwitter-bootstrap

The npm outdated command seems to ignore the caret notation specified in the package.json file

When looking at a package.json file that contains the following: "devDependencies": { "grunt": "^0.4.5", "grunt-concurrent": "^1.0.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-watch": "^0.6.1", "grunt-dev-update": "^1.1.0", ...

javascriptnode.jsnpmpackage.json

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Designing tables for email marketing

I've been researching the best way to style tables in my emails on the internet. From what I understand, CSS can be tricky when it comes to email formatting. So, when it comes to styling tables, is it better to use CSS or HTML? Should I opt for cod ...

htmlcssemail

Is there an issue with the precedence of jison rules?

I've been stuck for hours trying to solve what seems like a simple problem but I just can't figure it out :/ I'm working on defining a small javascript-like language in jison. The issue I'm facing is that both the Parameter rule and th ...

javascriptgrammaroperator-precedencejison

What is the process for displaying information from a database on a model popup box?

I am working on displaying books in the Index view that are retrieved from a database. Each book has a button underneath it. The goal is to have a modal box appear when these buttons are clicked, showing details of the corresponding book such as the book i ...

javascriptc#jqueryajax

Vue 3 components array typified with Typescript

I'm attempting to establish an array of components representing various steps. Initially, I attempted to assign the type to these steps: const steps = ref<Component[]>([ Component1, Component2, Component3, ]); However, this approach is n ...

javascripttypescriptvue.jsvuejs3