Adapting pre-designed CSS for Sharepoint 2010

Currently in the process of integrating Bootstrap into my Sharepoint 2010 site and addressing issues as they arise. However, I am struggling to identify the class responsible for the 'hover' and 'active' effects in the Global Navigation. Refer to the attached image for clarification. As depicted in the second navigation bar, there is an issue with the "transparent box" surrounding the button not extending to the bottom of the navigation element. I am unable to locate the controlling class for this element in order to make the necessary adjustments.

https://i.sstatic.net/LN3Ii.png

csssharepointbootstrap-4

Answer №1

To specify the specific css class, you can use: .ms-siteactionsmenuhover

Answer №2

After some investigation, I managed to identify the required IDs as s4-ribbonrow and zz17_TopNavigationMenuV4. It was necessary for me to modify the hover, focus, and active properties for these elements.

#s4-ribbonrow a:hover,
#s4-ribbonrow a:focus,
#s4-ribbonrow a:active,
#zz17_TopNavigationMenuV4 a:hover,
#zz17_TopNavigationMenuV4 a:focus,
#zz17_TopNavigationMenuV4 a:active {
    text-decoration: none;
}


#s4-ribbonrow *,
#s4-ribbonrow *:before,
#s4-ribbonrow *:after,
#zz17_TopNavigationMenuV4 *,
#zz17_TopNavigationMenuV4 *:before,
#zz17_TopNavigationMenuV4 *:after,
*[class*='ms-core-menu'],
*[class*='ms-dlg'],
*[class*='ms-dlg']:before,
*[class*='ms-dlg']:after,
*[class*='ms-cui'],
*[class*='ms-cui']:before,
*[class*='ms-cui']:after,
*[class*='ms-cui'] *,
*[class*='ms-cui'] *:before,
*[class*='ms-cui'] *:after,
*[class*='ms-dlg'] *,
*[class*='ms-dlg'] *:before,
*[class*='ms-dlg'] *:after,
*[class*='ms-webpart'] * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

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

What’s the best way to format a list item so that it displays images without any spacing between them?

I'm currently working on styling a group of images that are within an unordered list in order to achieve the following: The <ul> should take up the entire width of its parent element Each <li> should occupy 25% of the width of the <ul ...

csshtml-lists

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

Tips for preventing a column from extending beyond the edge of the browser window during resizing

Issue arises when I resize the browser window, causing the left box to extend beyond the browser boundary, making it impossible to see the contents even with the scrollbar below. <!DOCTYPE html> <html lang="en"> <head> ...

htmlcss

How can I ensure that my data remains properly aligned in a row with 9 columns while utilizing bootstrap?

My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...

htmltwitter-bootstrapcss

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

htmlcss

Alignment of Material within Two Adjacent Divisions

I'm having trouble centering the content within two side-by-side divs. It seems like the content in each of these divs is centering towards one another, which is not what I want. I've created a main container and placed two divs inside it. The ...

htmlcss

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

"Enhancing Your Website Navigation with jQuery: Incorporating Mouse Events into Your Menu

My objective is to create a simple mouseover effect on my menu that remains active while the mouse is in a submenu, and triggers the close() function when the mouse leaves the main tab or the submenu. I understand that an event handler is required to trig ...

javascriptjqueryhtmlcssdrop-down-menu

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

htmlcssreactjs

Having trouble selecting a button using xpath in Scrapy Python?

I am currently attempting to scrape quotes from a website called using my spider code that looks something like this: class quote(scrapy.Spider): name = 'quotes' # defining Name start_urls = [''] # Targeted urls def parse(s ...

csspython-3.xxpathscrapy

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

vue-router: A guide to disabling the outline property of the CSS in router-link

I am having trouble disabling the outline of a css link element. I successfully disabled the outline of a regular link using a css class, but I am unable to do so with the <router-link> element. How can I disable the outline for this? .page-link, .p ...

cssvue.jsvue-router

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

Glyphicons are not functioning properly

I've been trying to use the bootstrap-cosmo.css v3.3.7 file which contains the glyphicon -glyphicon-duplicate .glyphicon-duplicate:before { content: "\e224"; } However, when I try to use it, the icon doesn't show up. <a class="btn btn- ...

cssasp.net

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

javascriptcssreactjsmaterial-ui

Align boxes in the center within a DIV container

Here is the box design that I have created: https://i.sstatic.net/3rtcn.jpg The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in thi ...

javascriptjquerycsstwitter-bootstrap

What is the best way to incorporate Bootstrap 5 into a content script without causing any conflicts with the existing CSS of the website? (Chrome Extension)

In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files i ...

javascriptcssgoogle-chrome-extensionbootstrap-5

Applying style changes to the height on scroll event in Javascript for Chrome, Firefox, and Internet Explorer

I am working on triggering an event when scrolling to a specific height. I have code that successfully adds a style in Chrome, but it is not functioning properly in IE. Can anyone provide assistance? myID = document.getElementById("subnav"); var mySc ...

javascripthtmlcss

How to enhance the design with a box-shadow for a :after pseudo element

One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow. Her ...

htmlcsspseudo-elementcss-shapes