Sub menu moves when changing padding - css

I have a Prestashop with a CSS menu, http://empk.dk/nyshop/ the padding is now: 15px 9px 15px in this #header .pt_custommenu .pt_menu
Before I changed it, it was 11px 9px 37px, and it worked before, but now, the sub menu doesn't align with the main menu, I've tried to look in the chrome debug mode, and in the CSS file, but I just can't find the issue or what code to edit.
I assume it's in the div called popup, but I can't find it.
You can see the CSS file here: http://empk.dk/nyshop/themes/pos_elly5/modules/posmegamenu/css/custommenu.css
The menu I want to edit is the "beige" / yellow colored.
Hope you can help!

".popup" Class having css property through the Jquery or inline style so you need to find this class and apply "top:53px" on that class
or
just write in your css this Class :
.popup{
top:52px !important;
}
but when you use the "!important" keyword at that time you need to be very careful that it affects others class or not.

Related

How to hide line below firefox navbar?

I'm trying to make a very basic userChrome.css file to hide this 1 pixel line between the navbar and the current web page.
I scrolled and tried all this original css firefox but I can't find what class I have to edit to do that..
Found the tag by stripping down a stylish style piece by piece.
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
margin-bottom: -1px !important;
}

Why "margin" CSS style doesn't work in FlowPanel (GWT)?

I am using Gwt.
Say I got
.marginRight{
margin-right: 10px;
}
FlowPanel myFP=new FlowPanel();
Button myButton=new Button("Button");
Button myButton2=new Button("Button2");
myButton.addStyleName("marginRight");
myFP.add(myButton);
myFP.add(myButton2);
After ran, there is no gap between myButton & myButton2.
Note: Button got default gwt-button style. So I am not sure if that the main reason causing the issue. Also, If I add the Label into FlowPanel, then it can recognize the margin nicely. But PushButton doesn't work so we can eliminate that gwt-button style is the main cause.
This is javascript of the above code
<div><button class="gwt-Button GHKUF0UDD4" type="button">Button</button><button class="gwt-Button" type="button">Button2</button></div>
Do you know why it is? & How to fix?
You apply two styles to your buttons: gwt-Button, which specifies 0 margin on all sides, and your own style, which sets a margin of 10px to the right.
If you want to use both styles, and your style to prevail, use
.marginRight{
margin-right: 10px !important;
}
If you do not want the standard GWT style to apply, use:
myButton.setStyleName("marginRight");
instead of adding a new style name.

Customizing WP theme - how to change link for nav button in CSS?

I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.

Override user agent (Chrome) default styles inside GWT

i've a TabBar that after the last Chrome upgrade (32.0.1700.76 m) is displayed with an outline on focused tabs:
In past version there wasn't. To restore old view i tried to set some outline in CSS, like this:
.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}
(lime is just for see if it works).
Even this edit, the computed style still remains the default (-webkit-focus-ring-color auto 5px;
):
What should i do to override this user agent style?
EDIT
I think the blue outline is not of the HTML (div):
The one i want to put away is on the TabBar Item object:
I honestly don't know why the Churro solution worked before :(
I tried the following CSS to highlight the textarea on this Stackoverflow page, and it worked:
.wmd-input:focus {
outline: lime auto 5px !important;
}
Make sure your selector in front of :focus is correct.
EDIT
I took a look at a TabPanel in my own GWT app. The element that gets a blue ring around it in a TabBarItem is the Label (div) containing the tab's text, not the gwt-TabBarItem.
Try this selector: .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus

What is causing this nav bar to look different?

I am working on a Drupal 6 site that some CSS issues. I have used firebug to try and determine what is causing it, but I am at a loss.
Messed up nav bar
Correct nav bar
The page has a custom app that is loaded when you click on the link. I corrected another problem in the custom app stylesheet a couple of weeks ago by using firebug. I have tried modifying the dimensions in the theme stylesheet and the custom app stylesheet with no luck. I appreciate any suggestions.
change your #content css width to : width:657px;
And play with the margin to get it the same way
Check your sidebar too it's definitively different, maybe you wont have to modify the content if you modify the sidebar
you have two time the class #nav remove the one without the background-image
Resize the height of your class #title : #title{height: 34px;}
But one more time you have to class #title, so remove the one that as a bigger heigth thant 34px
Remove the color here : #nav a:link { text-decoration: none;}
5.You need to add this class to the link that is active : #nav a.active {background: url("/themes/a3_atlantis/active_overlay.png") repeat-x scroll 0 0 transparent;color: #0B486B;height: 24px;}
Lots of modification ;)
OR juste remove the duplicates classes and it will help a lot ! !

Resources