I'm experiencing a weird problem in my website that I haven't been able to solve myself so far: My site www.20watt.nl displays the normal navigation menu in all resolutions above 958 pixels, while my plugin "wp responsive menu" takes over for resolutions below 768. But between a resolution of 768-958, my site shows no menu at all (can be tested easily using screenfly)
My question: Where / how do I specify the resolution where my mobile menu takes over / i.e. becomes responsive? I've changed it in the plugin-settings, but that does not seem to help.
I'd like to have my mobile menu take over exactly at 958 pixels (because that's where the "normal" menu seems to end)
Many thanks & regards,
In your stylesheet responsive.css (http://www.20watt.nl/wp-content/themes/Foliowhite/css/responsive.css), the following line is hiding your menu:
#site-navigation ul { display: none; }
You will want to remove that from the max-width:959px media query block and add it to the max-width:767px block.
Related
I use performag theme from ThriveTheme and I have problem with the menu for cellphone.
It's a very big menu with a lot of sub-menus. ( It's not mine and I can't change it)
Performag theme use "#media only screen and (max-width: 768px)". But this theme open all sub-menu when you click on the hamburger menu, so if you want the last link in my menu, you have to scroll a lot.
So I changed the file css. Now it's "ok" but I have a trouble when I scroll. I can't scroll until the end.
http://dev.test.babylonradio.com/ You can look on my website with the inspector.
Thank you in advance.
Seems like this is an css issue. Try to use media query for mobile views.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am using the Avada theme and cannot figure out how to get the logo in front of the menu or header. It looks like the logo is part of the wrapper that contains the header, menu and logo. So if I change one, it affects the other.
This is how the theme has the logo set up -
https://imgur.com/NQN5ukO
This is the desired style -
https://imgur.com/EEOavLI
Thank you if anyone can help. :3
Wouldn't this be associated to z-index? As in, apply a z-index value to the navigation div the logo is sitting on and apply another z-index attribute with a higher value to the logo div? I think as long as the logo is position:absolute, position:relative, or position:fixed you should be good.
Here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I am relatively new to wordpress so please do forgive any incorrect terminology or silly questions as I am still learning and eager to do so.
I have a jewellery website (running Kallyas premium) which I have a row of banner icons inbetween the header and rev slider.
top banner icons
The problem is when viewing the site on reduced screen size or mobile view I want to replace this row of icons with one single icon/slider which displays my banner icons one at a time eg. Lowest Prices, A* customer service so on and so on.
A good example of what I'm trying to achieve is on the Watchshop.com homepage when viewed in mobile view.
watchshop.com slider effect
I can't seem to find a plugin that does this and I can't seem to achieve this with rev slider, maybe it needs some code?
Any help will be gratefully received.
Thanks
Dan
you would need to add some css media querys to show and hide certain things depending on screen size, for example you want to hide the nav links at mobile:
try something like this:
#media only screen and (min-width: 768px) {
.your_class_her_or_id_here {
display:none;
}
}
this would hide the nav links when viewed at screen size less than 768px,
you could do the same for the slider, so it only shows at a certain size otherwise its not shown. Hope this helps.
I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
just update your css
CSS
#media screen and (min-width:768px){
.container{
width:100%;
}
The site I am maintaining has bugs in the header and widget blocks. How do I change this?
Search bar is out of alignment with nav menu.
News and Events widgets overextends if too much text is displayed.
a. The news widget is from an automatic feed.
http://cafes.calpoly.edu
One error only shows in Chrome browser. In Safari I at least don't see the News widget over extending but the search bar in the main header navigation menu appears to have a distorted div in all browsers.
I am new to Drupal but am pretty familiar with Wordpress.
Is there a module I can download to enable me to fix this? If so, what code snippet could I use to establish the proper parameters for these blocks?
1) Option one reduce li font size if client is ok with it
font-size: 0.75em;
This worked for me and you the search bar was fixed.
2) Second option is to trim the text length. There is only so much u can fit in those tight cells.
abt the news widget I don't see anything wrong.
There is no "CSS" module in Drupal. To fix the issues you've mentioned you need to make small changes in the css files. To fix the search box aligment you should reduce the font-size of the menu items.
You will need at least ftp access to the site.