changing the color of my main menu and widget area
-
Hello ,
I am quiet new in the world of blogging and I don’t know much of CSS coding . I tried to change the color of my main menu and widget area and turn them from brown to black by applying the following codes
.admin-bar .main-navigation.sticky {
background-color: #000;
}.site-footer {
background-color: #000;
}It worked and they turned black but only while using my computer and google chrome however , I visited my site from different browsers firefox and internet explorer and they are still brown , i tried to google chrome from another computer and they are still in brown too , so I am seeking help to know if there are more refined or better codes or a better solution ?
please note that the my main menu is in black by default on my home page but not when clicking on any of the panels, so if you visit any of my associated panels and observe the main menu bar you would probably find it in brown and this what I am trying to solve
Thank you in advance for your kind attention
The blog I need help with is: (visible only to logged in users)
-
-
Hi, I’m seeing black on the menu area and footer area in Firefox. Did you get this figured out?
-
-
-
Hello there , many thanks for the support
I eliminated the old codes and applied the above listed one that you provided me with and the footer became black at all browsers which solved the footer problem perfectly
however the main menu is still in brown except on my home page which I believe it is the reason of why you thought I solved the problem
please click on any of the items of the main menu bar (form different browsers ) , say translation for example , and then observe the color of the menu when you are at the translation panel , you will find that it is still in brown
i eliminated the old code ( .admin-bar .main-navigation.sticky {
background-color: #000;
} ) that made it black at some browsers or computers ,so it appears in brown all the time now and at all browsers except when at my home pageIs there is any similar code like the one you provided me with but for the mian menu color ? where i can have may main menu in black all the time and at all pages
Thank you so much in advance
-
Hmmm, for some reason the custom CSS is not overriding the color set in the Customizer. Let’s try this. Go to Customize > Colors & Backgrounds, click on the first circle under “Colors, which is the Panel & Menu Background, then below the grid of suggested colors, click “pick your own color” and in the box at the bottom put 000000 and save.
-
Hello , thank you
I tried that , it worked and changed the menu color as desired but it also changed the color of the written or typed content and words became hazy somewhat , also other areas became black , tried to play with that yet seems it is not giving good looking layout , do you think there is still a chance to find a solution ?
much appreciated
-
just to make sure i explained well before , the footer area is totally solved now based on the initial code , so it is just the admin bar that is still stuck
thanks again
-
-
I am still trying to work on the problem , and dont what would be best solution
thanks in advance
-
Add this to your custom CSS.
.main-navigation { background-color: #000; border-color: #000; } -
-
-
Hello there
I have another question that is associated to a different matter :
I have created a secondary menu at my Pique theme , the secondary menu at Pique theme appears at the footer area , but I removed it up by using the following code.site-footer .secondary-links { position: fixed; top: 60px; right: 30px; z-index: 999999; }You can see it at the corner of my home page above (contact us ) (English.spanish.Home)
It is working perfectly but I thought it would be great if I could add (circled British flag) before English (circled Spanish flag) before Spanish and a (home icon) before home , is that doable ? Would it be possible to add these features by using a particular code?
Thanks you in advance
-
Hi, yes we can do this. First you need to upload those images to your media library and get the URLs of those images. Next add the following to the bottom of your custom CSS below everything else and then replace the URL_OF_IMAGE between the quote marks with the appropriate URL of the flag.
/*English*/ #menu-item-359 a { background: url("URL_OF_IMAGE") no-repeat scroll left top /contain; padding-left: 50px; } /*Spanish*/ #menu-item-358 a { background: url("URL_OF_IMAGE") no-repeat scroll left top /contain; padding-left: 50px; } /*Home*/ #menu-item-407 a { background: url("URL_OF_IMAGE") no-repeat scroll left top /contain; padding-left: 50px; } -
hello
It worked perfectly , thank you so much , however i tried to apply the same for my subdomain es.makeyourbusinesshappen.com but I had no results , not that I know much but found it strange, maybe the order of the items !could you please help me how to apply the same for my subdomain es.makeyourbusinesshappen.com
many thanks in advance
-
Menu, page and post ids are assigned on the fly by the system as needed, so they will not be the same from site to site.
On Español, the CSS selector would be: #menu-item-370 a
On English, the CSS selector would be: #menu-item-369 a
On the home page it would be: #menu-item-372 a -
-
one last thing that I have been trying to solve please:
if you take a look at my site http://www.makeyourbusinesshappen.com and click on contact us for example , the site will scroll down automatically
but if you observe at the top of the page you will see a small part from the previous page , in this case it is translationwhen I log in as an admin i dont see this issue, the page shows exactly at the start of it perfectly and it looks better
is there is a way to solve that ?
Much appreciated in advance
- The topic ‘changing the color of my main menu and widget area’ is closed to new replies.
WordPress.com Forums 