- This topic has 10 replies, 2 voices, and was last updated 8 years, 9 months ago by
.
-
Posts
-
Hey there,
I have a problem: I wanted to paste a customized menu with intense shortcuts to my new (under construction) website. The created shortcut is
#20160219 li > a {background: #858585 !important;color: #ffffff !important;}#20160219 li > a:hover {background: #ffffff !important;color: #858585 !important;}#20160219 li.current-menu-item, #20160219 li.current-menu-item > a {background: #dc774b !important;color: #ffffff !important;}#20160219 li.current-menu-item:hover, #20160219 li.current-menu-item > a:hover {background: #dc774b !important;color: #858585 !important;}#20160219 > li > a {background: #ffffff !important;color: #858585 !important;border-bottom: 5px solid #000000 !important;}#20160219 > li > a:hover {background: #858585 !important;color: #ffffff !important;border: 1px solid #000000 !important;border-radius:2px;}#20160219 > li, #20160219 > li.current-menu-item, #20160219 > li > a, #20160219 > li.current-menu-item > a { border-radius:2px;}Unfortunately, it doesn’t look a bit like it’s supposed to. Apparently the Theme (which has its own menu) overrides the settings.
As I am quite new to this whole webdesigning-topic, it would be great, if you could help me out here and give me a tip how to avoid this. 🙂
You can see the problem on the site: http:/temp.johannesfleischhut.de
Thanks a lot!
JohannesJohannes,
Hello!
I think the issue is related to the ID that is likely set in the [intense_menu] shortcode. If you have an ID set in the shortcode, you can remove it all together or set it to something that starts with letters. An ID cannot start with numbers. We automatically generate an ID if there is not one set in the shortcode. Our shortcode may generate one like “menu_20160219”. If you change the ID in the shortcode, the styles should be applied correctly.
Just for reference, a class on an HTML element can start with numbers, but an ID cannot. I don’t always remember this either. It took me a little bit to look over the code and figure out why the styles were not being applied.
Let me know if you have any further issues.
Thanks,
Josh
Josh, thank you very much!
This was a good first step. Unfortunately, there still appear some things, I did not set…
For example, there are border lines between the menu entrys. Also I would like to change the font style.
First, there was the predefined background-color of the themes menu on the empty space (where no menu entrys are). I got rid of this with a small css entry:
.custom_menu { background: white; border-bottom: 1px solid black; }Also I created the bottom line in this css as you can see.
It would be great, if you could give me a hint, what I have to change to get it work as I want 🙂
There is supposed to be only the bottom border and I want to change the font style (bigger and without that shadow-effect it has now).
Thanks!!
Cheers, Johannestemp.johannesfleischhut.de
PS: This is my current menu:
[intense_menu id="Menu_201602" type="horizontal" name="Hauptmenue" class="custom_menu" top_background_color="#ffffff" top_font_color="#858585" top_hover_background_color="#858585" top_hover_font_color="#ffffff" top_active_background_color="#ffffff" top_active_font_color="#000000" top_active_hover_background_color="#858585" top_active_hover_font_color="#ffffff" padding_left="3em" padding_right="3em"]Johannes,
Hello!
I’m not seeing the menu on your main page any longer, can you tell me where it is so that I can take a look at it and track down what CSS might need to be added? My guess is that your theme’s menu settings are still being applied to our menu. We add the CSS to change the colors and such, but the fonts and styling of the fonts are typically left to the theme. They can be overridden pretty easily with CSS, so I’ll take a look onc eI know where the menu is at.
Thanks,
Josh
Hey Josh,
thank you again! I changed some things at my page in the meantime. I inserted the menu again (in a different way) You*ll find it at the top of the front page.
The menu is actually very simple. If you could tell me, what I have to type in CSS, it would help me a lot. Thank you in advance!!
[intense_menu id="shortcode_menu" type="horizontal" name="Hauptmenue" class="hauptmenue" top_background_color="#203026" top_font_color="#ffffff" top_hover_background_color="#203026" top_hover_font_color="#39761e" top_active_background_color="#203026" top_active_font_color="#ffffff" top_active_hover_background_color="#203026" top_active_hover_font_color="#39761e" padding_left="15" padding_right="15"]Here you see, what it looks like: http://temp.johannesfleischhut.de/
The margin top and button is too big, also the font wrong and the lines between the entrys shouldn’t be there.
My current css entry for the Menu:
.hauptmenue { font: 1.25em "Calibri" !important; float: right; background: #203026; border-bottom: 1px solid black; }Everything works but the font (and I didn’t know the code for getting rid of the lines between the entrys.
Thanks!
Johannes
Johannes,
I am including some CSS that should get you closer. The CSS that you are using is fine, but the font is not setting properly because the “a” link classes are overriding the styles you have set.
.hauptmenue a { font-size: 1.25em; font-family: "Calibri"; border-left: 0; margin: 0; padding: 12px !important; }Use the code I added above along with your code. You can probably remove the font setting in your code since it is included in the code that I have added, but it won’t hurt leaving it.
If you need anything else, let us know.
Thanks,
Josh
Hey there, I got another question, I’m stuck with:
Is there any chance, that the responsive menu on mobile devices will open “in front of the next parallax scene”?
Right now I have the problem that it goes behind the next parallax scene. It’s probably my fault but I don’t know, what I’m doing wrong…This is the first bit of my code:
[intense_parallax_scene background_type="color" background_color="#203026" height="70" breakout="1" padding_top="0" padding_bottom="0" margin_top="-20"] [intense_menu id="shortcode_menu" type="horizontal" name="Hauptmenue" class="hauptmenue" top_background_color="#203026" top_font_color="#ffffff" top_hover_background_color="#203026" top_hover_font_color="#39761e" top_active_background_color="#203026" top_active_font_color="#ffffff" top_active_hover_background_color="#203026" top_active_hover_font_color="#39761e" padding_left="15" padding_right="15"] [/intense_parallax_scene] [intense_parallax_scene background_type="image" image="111" imagemode="parallax" full_height="1" breakout="1" advance_arrow_background_color="#ffffff"]As the first parallax scene, which is just supoosed to be some “head of the page”, has been given only a height of “70” I get problems in showing the whole fly out menu on mobile devices.
I hope I was clear enough with my explanation 🙂
Thanks
JohannesEdit: Solved it myself!
It works if you use “full height” and height adjustment instead of normal height.
Best
Johannes
You must be logged in to reply to this topic.