How to change background color
Permalink
Can anyone please tell me how to change the navigation (menu) bar background color? No matter what I tried, it doesn't change. I can change anything: main, ul, li, a etc., but not the nav itself.
If I do this in header.less:
the main background color changes to red. But if I do this:
NOTHING happens.
Why???
I want to have a similar nav bar (orange bar with menu buttons) to that like in this theme:
https://www.concrete5.org/marketplace/themes/brimstone1...
If I do this in header.less:
header{ ... } main { background-color: red; nav { ... } }
the main background color changes to red. But if I do this:
header{ ... } main { nav { background-color: red; ... } }
NOTHING happens.
Why???
I want to have a similar nav bar (orange bar with menu buttons) to that like in this theme:
https://www.concrete5.org/marketplace/themes/brimstone1...
Hi,
It's on my localhost so far (on laptop).
It's on my localhost so far (on laptop).
The <nav> element does not have a set height, it gets its height from its child elements.
The <nav> element has a child <ul> element that is floated right. When something is floated it is removed from the document flow and no longer gives height to its parent element.
What this means is that <nav> has a height of 0, so there is no height to display a background color.
You can try the following approach to add the "clearfix" class to the <nav> in a copy of the Auto-Nav responsive_header_navigation template. The clearfix class deals with floated element height.
http://nicolasgallagher.com/micro-clearfix-hack/...
- copy the responsive_header_navigation folder
concrete\blocks\autonav\templates\responsive_header_navigation
- create this file path: application\blocks\autonav\templates
- paste the responsive_header_navigation folder into: application\blocks\autonav\templates\
- change the name of the responsive_header_navigation folder to "responsive_header_navigation_clearfix"
application\blocks\autonav\templates\responsive_header_navigation_clearfix
- open the view.php in the responsive_header_navigation_clearfix folder
- on line 115 add the "clearfix" class to the nav
- apply the new "Responsive Header Navigation Clearfix" custom template to the Auto-Nav
- use CSS to add a background color
The <nav> element has a child <ul> element that is floated right. When something is floated it is removed from the document flow and no longer gives height to its parent element.
What this means is that <nav> has a height of 0, so there is no height to display a background color.
You can try the following approach to add the "clearfix" class to the <nav> in a copy of the Auto-Nav responsive_header_navigation template. The clearfix class deals with floated element height.
http://nicolasgallagher.com/micro-clearfix-hack/...
- copy the responsive_header_navigation folder
concrete\blocks\autonav\templates\responsive_header_navigation
- create this file path: application\blocks\autonav\templates
- paste the responsive_header_navigation folder into: application\blocks\autonav\templates\
- change the name of the responsive_header_navigation folder to "responsive_header_navigation_clearfix"
application\blocks\autonav\templates\responsive_header_navigation_clearfix
- open the view.php in the responsive_header_navigation_clearfix folder
- on line 115 add the "clearfix" class to the nav
echo '<nav class="ccm-responsive-navigation original clearfix"><ul>'; //opens the top-level menu
- apply the new "Responsive Header Navigation Clearfix" custom template to the Auto-Nav
- use CSS to add a background color
MrKDilkington,
Thank you very much for the suggestion about making nav's height > 0. How couldn't I think of that? :)
So, I've got my nav bar with background across the page now. But it created another problem - on a smaller screen (mobile, ipad) the menu items are displayed on top of the menu button making the menu impossible to close. I tried to play around with moving the button around with a position property, but because the header dynamically changes its height, it sometimes disappears on some screens (I can for example set the button's position to top: -350px for a mobile, but it disappears on an ipad).
Could anyone please tell me how I can have that mobile menu button, say, in the top right hand corner? Is it possible?
Thank you very much for the suggestion about making nav's height > 0. How couldn't I think of that? :)
So, I've got my nav bar with background across the page now. But it created another problem - on a smaller screen (mobile, ipad) the menu items are displayed on top of the menu button making the menu impossible to close. I tried to play around with moving the button around with a position property, but because the header dynamically changes its height, it sometimes disappears on some screens (I can for example set the button's position to top: -350px for a mobile, but it disappears on an ipad).
Could anyone please tell me how I can have that mobile menu button, say, in the top right hand corner? Is it possible?
You are making modifications to the Elemental theme (and possibly templates) that require a live site to debug. Debugging based only on your description of the problem would not be productive.
Based on your recent posts, you appear to be having CSS related issues. I recommend reading through this excellent site -http://learnlayout.com/.
Based on your recent posts, you appear to be having CSS related issues. I recommend reading through this excellent site -http://learnlayout.com/.
What is the link to your site?