2 Comments

Change CSS for navigation bar

How to move the top links to the navigation bar Magento 2
How Magento process block defined inside layout xml?

I’m using the Luma theme. I would like to change the padding for the a-tag tag used in the navigation submenu. I can change the backgroundcolor of the items (li) like this,

@navigation-desktop-level0-item__active__color: @navigation-desktop-level0-item__color;,

but not the padding of the a-tag within the li-tag. Can anyone help me?

Related Posts

  • How to align the ul li perfectly columnwise? (1)
    My menu is like this: Here is my css code: .nav-primary { position: absolute; display: block; margin-top: -85px; } .nav-primary li.level0, .nav-primary a.level0 { display: inline-block; } .nav-primary li { position: relative; } .nav-primary li.level0 > a […]
  • Changing main navigation? (1)
    I would like to change the dropdown behaviour of navigation which files needs to be changed? I try to give for the dropdown 100% width and placing the items inline I see this file /vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml but how do I override in […]
  • CSS files not update with _extend.less rules (0)
    I has installed magento 2 version 2.0.7-0, I trying to create my own theme but I can get archive that styles in _extend.less work correctly. This is my path theme: /app/design/frontend/<vendor>/<themeName> Inside the themeName I has created this folder […]
  • Magento 2 total validator errors (0)
    I am using total validator tool for validating html 5 and css3 issues on my magento 2 website.I got errors and warnigs on css pages.Below are the css page […]
  • Adding Link to Contacts page in top category navigation bar [duplicate] (0)
    This question already has an answer here: Add new links to top links in Magento 1.9 3 answers Linking a category to a page […]
  • Moved cart from header to nav on RWD theme and now on max 770px screen cart is in strange place (0)
    This is my own custom version of the RWD theme in magento 1.9 As you can see from the image, I have moved the cart from the default location to the navigation bar. The problem arises when I resize the window to 770px or less as the cart now moves to this location: […]
  • display product list in left navigation bar (0)
    I am using magento V1.9.2.4 with luxury theme V1.2.4. I need to display products under the category in left navigation bar. Any idea how to achieve it? Here only shows sub categories. beside that i want to display all the products in main door lock category contain
  • display product list in left navigation bar (0)
    I am using magento V1.9.2.4 with luxury theme V1.2.4. I need to display products under the category in left navigation bar. Any idea how to achieve it? Here only shows sub categories. beside that i want to display all the products in main door lock category contain
  • display product list in left navigation bar (0)
    I am using magento V1.9.2.4 with luxury theme V1.2.4. I need to display products under the category in left navigation bar. Any idea how to achieve it? Here only shows sub categories. beside that i want to display all the products in main door lock category contain
How to move the top links to the navigation bar Magento 2
How Magento process block defined inside layout xml?

2 Comments on this article

  • User November 12, 2016

    Use the developer tools of Chrome to identify the CSS you want to change. Using the map files generated, you should be able to use to identify the LESS code causing the problem.

    Source maps should be automatically generated when using grunt. Consult the front-end dev docs on how to setup grunt.

    There you might either find a configuration variable you just have to change or you have two options:

    1) copy the .less file to your theme and adapt it

    2) add own LESS code in your theme with a more specific CSS selector to overwrite the core CSS/LESS.

    I currently use option 1) because it keeps the LESS code more structured. The downside is that it is necessary to copy and maintain core code.
    I first commit the unmodified xopy of the .less file to git, to later track my own changes.

    Reply

  • User November 12, 2016

    The way I add styles that are not included in the basic .less files is to add them using regular css.

    Add into the header for: magento/app/design/frontend/Company_name/theme_name/Magento_Theme/layout/default.xml

    <head>
      <css src="Magento_Theme::css/css_file_name.css"/>
    </head>
    

    And then add your styles into the file at: magento/app/design/frontend/Company_name/theme_name/Magento_Theme/web/css_file_name.css

    In your case, it could be:

    .navigation li.ui-menu-item a {
       padding: 5px;
    }
    

    Reply

Add a comment