Horizontaal navigatie menu centreren via CSS

13 okt 2015 15:32 - 13 okt 2015 15:42

#1

Beste mensen,

Ik probeer, lokaal met Ordasoft Blank Template in J3.4 het main menu te centreren. Ik heb allerlei CSS variaties geprobeerd met

display:inline-block en text-align-center

maar krijg het niet voor elkaar. Nu heb ik het .main_menu ul.menu een left margin van 45px mee gegeven om dit te breiken maar zodra de menu items veranderen klopt dit uiteraard niet meer.
Mijn vraag: welke aanpassingen zijn er nodig in CSS om het main_menu horizontaal te centreren/
Bijgaand de HTML en CSS

Alvast bedankt voor de moeite

Paul

HTML

Code:

<?php if ($this->countModules('Mainmenu')): ?>
				    <div class="main_menu">
						<nav id="site-navigation-main" class="navbar" role="navigation">
							<div class="navbar-header">
						      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
						        <i class="fa fa-bars"></i>
						      </button>
						    </div>
							<div id="main-navbar-collapse" class="collapse navbar-collapse">
								<jdoc:include type="modules" name="Mainmenu" style="xhtml" />
							</div>
						</nav><!-- #site-navigation -->
				    </div>
				<?php endif; ?>

CSS

Code:

.main_menu ul.menu > li ul {
  display: none;
}

.main_menu ul.menu li.parent:hover > ul {
  display: block;
}

.main_menu ul.menu {
    float: left;
    margin: 10px 0 0 45px;
}

.main_menu ul.menu li {
    float: left;
    position: relative;
    list-style: none;
}

.main_menu ul.menu > li > a {
    font-size: 14px;
    margin: 0 10px;
    padding: 0 15px 30px;
    position: relative;
    text-transform: uppercase;
}

.main_menu ul.menu li a {
  white-space: nowrap;
-webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}

.main_menu ul.menu > li > a {
/*    border-bottom: 0px solid transparent;*/
}

.main_menu ul.menu > li > a:hover {
   /* border-bottom: 0px solid #12ABFF;*/
}

.main_menu ul.menu > li.active > a {
    background-color: transparent;
    border-bottom: 2px solid #12ABFF;
    box-shadow: none;
    color: #000;
}

.main_menu ul.menu > li.active > a:hover {
    box-shadow: 0 0 0 transparent;
    background-color: transparent;
    border-bottom: 2px solid transparent;
}

.main_menu ul.menu > li a {
   display: block;
}

.main_menu ul.menu > li.parent span.arrow {
    background: url("../images/arrow.png") no-repeat scroll 0 7px transparent;
    height: 20px;
    right: -5px;
    position: absolute;
    width: 20px;
}

.main_menu ul.menu li ul li.parent span.arrow {
    background: url("../images/arrow.png") no-repeat scroll 0 center transparent;
    height: 15px;
    position: absolute;
    top: 7px;
    width: 30px;
}

.main_menu ul.menu li.parent ul,
.main_menu ul.menu li ul li.parent ul {
     background: #fff;
     border-left: 1px solid #d5d5d5;
     list-style: none;
     position: absolute; 
     float: left;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
     min-width: 200px;
     z-index: 99;
}

.main_menu ul.menu li.parent ul {
    left: 9px; 
    top:50px;
    border-top: 2px solid #12ABFF;
}

.main_menu ul.menu li ul li.parent ul {
    left: 100%; 
    top: -2px;
}

.main_menu ul.menu li.parent ul li {
    margin: 0; 
    padding: 0;
 -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.05) inset;
   -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 0.05) inset;
	box-shadow: 0 0 1px rgba(255, 255, 255, 0.05) inset;
    border-bottom: 1px solid #EAEAEA;
    clear: both;
    width: 100%;
}

.main_menu ul.menu li.parent ul li.lastChild {
    border-bottom: none; 
}

.main_menu ul.menu li.parent ul li a {
  font-size: 14px;
    float: left;
    padding: 7px 10px 7px 0;
    margin: 0 15px 0 0;
    text-indent: 10px;
-webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    width: 100%;
}

Edit Jelle. Ik heb de quote tussen quotetags geplaatst, volgende keer graag zelf doen.

Edit Jelle. Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

Laatst bewerkt 13 okt 2015 15:42 door Jelle.

paulus67
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 88

Horizontaal navigatie menu centreren via CSS

13 okt 2015 15:47

#2

Heb je een link naar je site?

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37102

Horizontaal navigatie menu centreren via CSS

13 okt 2015 15:49

#3

Nee Astrid, is op lokale server XAMPP

paulus67
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 88

Horizontaal navigatie menu centreren via CSS

13 okt 2015 15:51

#4

Dan wordt het lastig. Als ik demo bekijk dan zit er namelijk ook nog een logo links van het menu. Dus dan is het mij een raadsel wat je bedoelt met menu centreren.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37102

Horizontaal navigatie menu centreren via CSS

13 okt 2015 15:55

#5

Op www.afdeling39.nl gebruik ik het zelfde template. Het menu staat daar R bovenin, vrijwel gelijke CSS en HTML. Dat staat daar nu links uitgelijnd maar in de andere situatie wil ik het centreren (op een andere positie)

Gemarkeerd als webneus door: Astrid

paulus67
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 88

Laatste nieuws

Welkom bij Joomla!NL

Horizontaal navigatie menu centreren via CSS

Horizontaal navigatie menu centreren via CSS

Horizontaal navigatie menu centreren via CSS

Horizontaal navigatie menu centreren via CSS

Horizontaal navigatie menu centreren via CSS

Horizontaal navigatie menu centreren via CSS

Laatste forumberichten

Wil je Joomla!NL steunen?